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Capitulo 1 

O desenvolvimento web hoje 


Talvez eu seja um otimista, mas acredito que nos encontramos em uma epoca revo- 
lucionaria para o desenvolvimento web. A internet se proliferou pelo mundo gramas 
aos avanqos de banda larga e os diversos dispositivos capazes de navegar pela rede 
- celulares, tablets, televisoes e videogames. Diversas empresas do mundo digital 
impulsionam a evolu^ao das tecnologias que usamos para criar uma web melhor. 
Profissionais em empresas como Google, Microsoft, Apple e Facebook trabalham 
exclusivamente em melhorias para os navegadores mais utilizados, alem de parti - 
cipar da defini^ao de novos padroes e disseminam bastante conhecimento junto a 
comunidade de desenvolvedores. 

E tudo ira continuar a se expandir. Novas empresas, novos padroes, novos dispo¬ 
sitivos. A industria da internet vai continuar a crescer e precisamos de bastante ajuda 
para continuar esse trabalho. E e muito facil garantir o seu espaco neste universo que 
se move como um trem bala. Basta participar. 
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1.1 Por que voce deve aprender HTML e CSS 

Caso voce seja urn designer sem muita experiencia com desenvolvimento, ou urn 
programador mais acostumado a trabalhar com linhas de comando e compilado- 
res do que navegadores, me deixe explicar um pouco a importancia de se aprender 
HTML e CSS. Se voce estiver trabalhando ou pretende trabalhar com tecnologia, 
acredito que boa parte - ou tudo - dos seus projetos sera utiiizado atraves de um na- 
vegador. Seja um sistema interno de um banco, uma rede social, um grande portal 
de noticias ou sites para campanhas de publicidade, o meio comum hoje em dia e 
a web, e e bastante interessante ter uma otima base de conhecimento sob re desen- 
volvimento front-end (um dos termos usados para se referenciar a interface de uma 
aplica^ao) para contribuir para o sucesso dos projetos que voce estiver participando. 

Por isso, recomendo muito que voce aprenda sobre o que faz a web funcionar. 
Alem de livros como este, existem diversos cursos e sites para voce aprender mais a 
respeito ou aprender outras tecnologias relacionadas. Imagine cuidar de um parque 
de servidores sem ter bons conhecimentos de sistemas operacionais e de topologia 
de redes, ou trabalhar em propaganda impressa sem entender sobre as cores ou o 
papel usado. 

1.2 O ESTADO DOS NAVEGADORES 

Todo o HTML e o CSS que escrevemos ganha vida dentro dos navegadores utilizados 
por quern acessa nossas paginas e sites, por isso e bastante importante ter um bom 
entendimento de como eles funcionam e, principalmente, dos buracos no meio do 
caminho. Desde os tempos do Mosaic {que eventualmente se tornou o Netscape) e 
das primeiras versoes do Internet Explorer em 1995 sempre enfrentamos uma guerra 
de incompatibilidade entre os nevagadores e a necessidade de padroes para garantir a 
interoperabilidade da web entre clientes diferentes. Enquanto essa briga pode custar 
alguns cabelos nossos, ela tambem impulsiona a evolu^ao das tecnologias que fazem 
os navegadores funcionar. O Google Chrome mudou a perspectiva sobre o processo 
de atualiza^ao continua, garantindo que a maioria dos seus usuarios possuam a ul¬ 
tima versao do navegador, e o Firefox come^ou a adotar um processo similar. E o 
componente de debug e inspe^ao do Firefox, o Firebug, definiu o modelo basico para 
que os outros navegadores implementassem ferramentas similares. 

Atualmente, o Google Chrome costuma ser o campeao dos testes de compatibi- 
lidade com as ultimas especihca^oes, sempre seguido de perto das ultimas versoes 
do Firefox, Safari e Opera. Boa parte das inclusoes do HTML5 e CSS3 ja estao dis- 
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Capitulo i. O desenvolvimento web hoje 


ponlveis nesses navegadores por complete ou atraves de prefixos proprietaries. O 
Internet Explorer, atualmente na versao 9 (no momenta da escrita desse livro a ver¬ 
sao 10 esta em desenvolvimento), ainda se encontra bem atras dos demais, mas as 
promessas para a sua proxima versao sao interessantes. 

Os perigos moram nos casos onde precisamos ir alem das ultimas versoes e tra- 
balhar com mais antigas, como versoes do Firefox anteriores a 8 e os famigerados 
Internet Explorer 6 e 7. A diferen^a entre os navegadores e a performance do JavaS¬ 
cript em compara^ao com as suas ultimas versoes e assombrosa, mas em alguns casos 
a audiencia desejada se mantem presa a esses navegadores, por complicates para se 
atualizar o navegador ou ate o sistema operacional - As ultimas versoes do Internet 
Explorer nao sao compativeis com o Windows XP por exemplo, o que atrapalha a 
atualizacao em alguns ambientes corporativos. 

Por isso, e importante definir as fronteiras dos navegadores que voce pretende 
trabalhar, e se aproveitar das tecnicas adequeadas ou das solutes existentes para 
problemas relacionados a eles. 


1.3 A COMPLICA^AO DOS PREFIXOS PROPRIETARIOS 

Para quem esta acompanhando a crista da onda, diversas propriedades e funciona- 
lidades novas nao se encontram completamente definidas e implementadas nos na¬ 
vegadores, mas isso nao nos impede de utilizar versoes “experimentais” delas. Para 
isso, cada navegador costuma expor essas novidades com prefixos especificos para 
diferenciar da implementa^ao final. O que a princlpio pode soar como uma otima 
ideia, se tornou um fardo para todos os desenvolvedores: escrever as mesmas linhas 
de CSS (ate) 4 vezes, assim: 

.button, { 

/* Prefix© para o Firefox. */ 

-moz-transition: all 0.2s linear; 

/* Prefixo para 0 Chrome, Safari, Safari Mobile e Android. */ 

-webkit-transition: all 0.2s linear; 

/* Prefixo para o Opera. */ 

-o-transition: all 0.2s linear; 

/* Versao final, ainda nao suportada em todos os browsers */ 

transition: all 0.2s linear; 

> 

Enquanto hacks como esse podem parecer desnecessarios e culpados por sujar 
o codigo, e preciso entender a importancia deles. Ja estamos desfrutando e testando 
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essas propriedades enquanto elas sao definidas e refinadas. O objetivo e, eventual- 
mente, nao precisar mais das versdes prefixadas e se utilizar apenas a versao canonica 
das propriedades. 

Mas nem todos param para acompanhar o progresso desses itens. Propriedades 
como border-radius e box-shadow nao precisam mais de prefixes para os principais 
navegadores de desktops, e ate o final de 2012 outras propriedades como animation, 
transition e transform estarao finalizadas e devidamente implementadas. 

Para isso, se precisa levar em considera^ao dois itens: Mantenha-se atualizado 
sobre o suporte dos navegadores para novas funcionalidades - minha referenda fa- 
vorita e o http://caniuse.com, que possui a rela^ao de navegadores com suporte com- 
pleto, parcial ou inexistente, e que eu costumo visitar de tempos em tempos - prin- 
cipalmente ao come^ar novos projetos - para me atualizar sobre esse assunto. Outro 
ponto importante e que voce deve mitigar ou automatizar o ruido e retrabalho ge- 
rado pelo uso de prefixes, seja com solu^des como pre-processadores ou ferramentas 
em JavaScript, e focar o seu trabalho no que e tido como padrao, pois em algum mo¬ 
menta os prefixos nao serao mais necessaries. 

Para isso vamos trabalhar com os padroes definidos e eventualmente citando os 
prefixos quando necessarios. 

1.4 A LONGA E SINUOSA ESTRADA DESTE LIVRO 

Neste livro, vamos passar por diversas receitas e tecnicas para voce utilizar em seus 
projetos, e vamos ler e escrever muito codigo - muito mesmo. Usaremos tags e pro¬ 
priedades que estao em uso a anos, alem de passar por adicoes recentes do HTML5 
e do CSS3. A minha intencao e mostrar exemplos praticos que provavelmente voce 
chegou a ver ou ira usar no seu dia-a-dia, mas deixo essa avalia^ao a voce. Eu sei que 
varios deles ja me ajudaram uma ou duas vezes por ai. 

Para tudo isso, precisamos de um ponto de saida, uma tela em branco para o 
nosso trabalho. Alem da estrutura basica de HTML abaixo, vamos utilizar algu- 
mas ferramentas para ajudar o nosso trabalho e deixar algumas partes nao tao inte- 
ressantes do desenvolvimento web de lado, assim podemos focar no que realmente 
importa. Utilizaremos o Normalize.css (http://necolas.github.com/normalize.css/) 
como um estilo de base, para garantir uma consistencia melhor entre navegadores 
diferentes e o -prefix-free (http://leaverou.github.com/prefixfree/), que sera respon- 
savel por tratar os prefixos proprietaries para as propriedades de CSS3 que ainda 
nao se tornaram um padrao entre navegadores. Alem deles, iremos precisar de 
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urn pouco de JavaScript para finalizar alguns dos nossos exemplos, e ai o jQuery 
{http://jquery.com/) entrara em agao. 

Mas nao tema! Caso tudo isso pare^a demais para voce, fique seguro que iremos 
entrar em detalhes sobre resets de CSS e sobre o -prefix-free. Por enquanto, posso 
te garantir que eles irao ajudar bastante o nosso trabalho ao decorrer deste livro. 
Abaixo, segue o minimo necessario de codigo HTML que iremos precisar. 

Voce pode baixar este template em http://lucasmazza.github.com/template.zip 

<!doctype html> 

<html lang= 'pt-BR 1 > 

<head> 

<meta charset=’ r UTF-8 M > 

<titlex/title> 

<link rel=" stylesheet" href="normalize. css ,f > 

<script src= ,f pref ixfree .min. js M x/script> 

</head> 

<body> 

<!-- 0 seu HTML vem aqui! —> 

<script src™" jquery.min.js "></script> 

</body> 

</html> 

Para o CSS especifico de cada exemplo, voce pode criar um arquivo com um 
nome relacionado ao que estiver fazendo e adicionar uma referenda a ele, logo 
abaixo do normalize, css. Assim, no exemplo de an imagoes, voce pode criar um 
arquivo animacoes. css e colocar uma tag link dentro da tag head. 

<!doctype html> 
chtml lang= 1 pt-BR 1 > 

<head> 

<meta charset= lf UTF-8 M > 

<title>Trabalhando com animaqoes !</title> 

<link rel="stylesheet" href="normalize .css"> 

<link re 1=" stylesheet" href ="animacoes.css "> 

<script src= ,h pref ixfree .min. js M x/script> 

</head> 

<body> 

<!-- Q seu HTML vem aqui! —> 

<script sr c® ,r jquery . min . j s" ></script> 

</body> 

</html> 
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Com isso em maos, hora de come^ar a trabalhar no que realmente interessa! 
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Capitulo 2 

Os primeiros passos com o nosso 
site 


Antes de mergulharmos de cabe^a em tecnicas espedficas, propriedades de CSS e 
combina^oes de tags e estilos, vamos praticar um pouco d e front-end arroz com fei- 
jao para garantir que estamos prontos para os demais assuntos e que as bases de 
desenvolvimento web estejam bem claras para voce. 

Sao Paulo, Sao Paulo 

Quando voce mora bastante tempo em uma mesma cidade voce sempre define 
uma lista de lugares e regioes da sua preferencia, e sempre os indica para os seus ami¬ 
gos de fora quando eles chegam para passar alguns dias. Para deixar a minha lista de 
paradas obrigatorias de Sao Paulo um pouco mais interessante de se ver vamos criar 
o O que eu mais gosto em Sao Paulo..., um site de uma pagina so para falar sobre 
alguns lugares da cidade. A pagina tera uma lista de 3 lugares de maior importancia, 
com uma breve descri^ao, uma foto, e uma lista adicional de mais coisas a se ver na 
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cidade. Nos vamos cria-la do zero, e a versao final ficara assim: 


O que eu mais gosto em Sao Paulo 


Passear na Avenida Paulista! 


Jm dos principals centres financeiros da cidade, a avenida 
Paulista cam be m pos&ui divers as opcoes de entretenimento. 
Endereco do Museu de Arte de Sko Pauto, MASP. do Teacro 
Gazeta e muitos outros, a regiSo e de f£el I acesso gramas as 
diverts I in has de onibus que cruzam a avenida e a linha de 
metro que passa por baixo dela. 

A Avenida Paulista senpre e assunto, O que sera que estao falando a respeito no 
Twitter? 



E ea istfcm rnuiiEj's miTrns lugares 

I rite renames na cidade. 

1. □ MoraadD Municipal. 
i, A Sala Slo Paulo. 

3 . Os estadio5 dos principals-times de 
fucebol cfa cidade. 

4. Ell versos muse □*, co mo o Memorial 
da America Latina, Mussu da lingua 
Ponugussa e o Must u do lpiranha. 

5. E mais! 


Os bares da Vila Madalena 



Depois de urn dia de trabalho, nada melhor do que um 
bom etiopp, um pecteco e uma convma em uma mesa de 
bar. Oproes de sobra na regiao das ruas Aspioielta, 
Fradique Coudnfto e Wisard. 


Figura 2.1: O nosso site sob re lugares de Sao Paulo que nao se pode deixar de visitar. 


A versao final da nossa pagina tambem esta disponivel online em http:// 
saopaulo.herokuapp.com 

2.1 Escrevendo HTML, de dentro para fora 

Vamos come^ar pela parte mais importante da pagina, o conteiido. Que no caso, sao 
os 3 lugares que voce nao pode deixar de visitar em Sao Paulo. O primeiro, a Avenida 
Paulista, ficara assim: 

<h2>Passear na Avenida Paulista!</h2> 

<p> 

Um dos principais centros financeiros da cidade, a avenida Paulista 
tambem possui diversas opgoes de entretenimento. Endereqo do Museu 
de Arte de Sao Paulo, <em>MASP</em>, do Teatro Gazeta e muitos outros, 
a regiao e de facil acesso gramas as diversas linhas de onibus que 
cruzam a avenida e a linha de metro que passa por baixo dela. 

</p> 

<p> 

A Avenida Paulista sempre e assunto. 0 que sera que estao falando a 
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respeito no <a href= 'https://twitter.com/#!/search/Avenida Paulista' 
target 3 1 _blank 1 >Twitter</ a>? 

</p> 

O que temos aqui? Primeiro, um titulo secundario utilizando a tag h2, acompa- 
nhado de dois paragrafos com texto, delimitados pela tag p. Dentro dos paragrafos, 
alem do proprio texto, temos outras tags para definir mais elementos. Uma delas e a 
tag em, utilizada para indicar enfase, que tera o seu texto exibido em italico na pagina. 

O outro element©, e um link para se navegar aos resultados de busca do Twitter para 
o termo “Av. Paulista” e criado pela tag a (derivada da palavra an com em ingles, an¬ 
chor). O atributo href indica qual o endere^o que o link aponta, e o target indica 
que o link deve ser aberto em uma nova pagina. Estas sao algumas das principal 
tags utilizadas para se definir elementos de conteudo, entao voce ira ve-las bastante 
por aqui. 

Seguindo em frente, podemos adicionar o resto do nosso conteudo, outros 2 lu- 
gares. Um deles e a regiao da Vila Madalena, e o ultimo e o Parque do Ibirapuera. 

<h2>0s bares da Vila Madalena</h2> 

<p> 

Depois de um dia de trabalho, nada melhor do que um bom chopp, um 
petisco e uma conversa em uma mesa de bar. Opgoes de sobra na regiao 
das ruas Aspicuelta, Fradique Coutinho e Wisard. 

</p> 

<p> 

Veja quais os melhores bares e restaurantes da regiao no 
<a href= 1 http://vejasp . abril.com.br/busca?chn=baresfequ= 
&nbh=Pinheirosy o 20/°/20Vila%20Madalena' target 3 ' _blank 1 > 

Guia da VEJA Sao Paulo. 

</a> 

</p> 

<h2>D Parque do Ibirapuera</h2> 

<p> 

Um dos cartoes postais da cidade, o parque dispoe de mais de 1,5 km{~2} 
de area verde, lagos artificials e pistas de cooper e ciclismo. E se 
isso nao fosse o suficiente, o parque costuma ser palco de diversos 
eventos culturais ao longo do ano. 

</p> 

<p> 

Veja no <a href- 1 http://goo.gl/maps/HoHS 1 target 3 ' .blank '>mapa</a> 
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como chegar ao parque. 

</p> 

Nada de novo ate o momenta. Novos paragrafos, titulos e links para outros luga- 
res - a busca de bares do site da Veja Sao Paulo e a localiza^ao do Parque no Google 
Maps. Com a parte principal no seu lugar, vamos continuar na lista de melhorias 
a fazer para a nossa pagina. Todo site precisa de um titulo, certo? Para isso vamos 
utilizar a tag hi, que representa um titulo principal. Alem disso, dentro do elemento 
head, podemos preencher a tag title com um titulo para a janela do navegador. 

<!doctype html> 

<html lang= 1 pt-BR 1 > 

<head> 

<!-- outras tags do head aqui —> 

<title>0 que eu mais gosto em Sao Paulo</hl> 

</head> 

<body> 

<hl>0 que eu mais gosto em Sao Paulo</hl> 

<!-- o nosso conteudo aqui... —> 

</body> 

</html> 


Q que eu mais gosto em Sao Paulo 

Paz&ear na Avenlria Pau lists! 

UrnwwncuinwTOfcCTOseidW*. n ingniflii Fiji ih imiu i tivmvu aiwwrirwflio m 

feu *go Fj._‘£. WJ.5F. floRnc Quel** mwrtS) tana, *n$Aa Adi tfedl u {Mmii lirtnn^ flrvbu;s qiJ C*u»ma 

a uorfila « * lijftu d» ™*Q yu* pass.i par hkas tUA. 

\ Avon as P aiiiesm so rr^'ti * oitL r-n. o q_# ti qat onk> rnJavdo a rasped no ■ i 

Os bares da Vila Mnd.alena 

dopois: da tabol lw, nidi maFior da qua im bom vbtum, wn pcLsw a urnararnwM^umoinitBa'd* bar, Gvt'-wiu sab r n na regie 


Figura 2.2: Todo o nosso conteudo, sem estilos. 


Otimo! fa podemos dizer que estamos com uma pagina em maos, certo? Bern, 
o HTML esta no seu lugar, mas precisamos de um pouco de CSS para melhorar a 
apresenta^ao do nosso conteudo. 


2.2 Adicionando formata^oes basicas 

Para come^ar o CSS da nossa pagina vamos fixar a largura disponivel para o conteudo 
e centralizar o mesmo na pagina, deixando um espa^o em branco nas laterals. Para 
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isso, adicionamos uma tag div em volta de todo o HTML que criamos dentro do 
body, com uma classe chamada container 

<div class=' container '> 

<!-- Todo o corpo da pagina vem aqui... --> 

</div> 

E o CSS para centralizar esta div na pagina: 

.container { 
margin: 0 auto; 
width: 960px; 

> 


A propriedade width fixa a largura para 960 px, adequando o conteudo a telas 
de pelo menos i024px de largura, como tablets e netbooks. A margem superior e 
inferior esta com 0, e as margens laterais em auto cuidam de centralizar o elemento 
na pagina. O proximo passo e melhorar a exibi^ao dos textos, ajustando um pouco 
o estilo das fontes com o seguinte codigo, que deve ser adicionado acima do CSS 
anterior: 

body { 

font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, 
sans-serif ; 
line-height: 1.6; 

> 


Aqui, estamos trocando a familia de fontes utilizadas para uma lista de 4 fon¬ 
tes diferentes que sao utilizadas da seguinte maneira: caso a primeira fonte listada 
nao esteja disponlvel no sistema operacional do usuario, o navegador tentara utili- 
zar a proxima e assim sucessivamente. A Lucida Grande sera a fonte utilizada pelo 
Mac OS X ao exibir a nossa pagina, enquanto a Lucida Sans Unicode sera vista por 
usuarios do Windows, ja que este sistema operacional nao possui a primeira fonte 
da nossa lista. Em casos mais extremos, Verdana sera utilizado ou o navegador ira 
exibir uma fonte sem serifa por padrao. Uma forma de se contornar isso e instalando 
diversas fontes diferentes por conta propria, mas nao podemos contar com isso. En¬ 
quanto o line-height de 1.6, sem nenhuma medida especlfica - como px ou em - 
indica para a altura das linhas ficarem com 160% da altura da fonte. Caso ela esteja 
em 16 px, o line-height sera 25 px. Caso a altura da fonte mude, a altura da linha de 
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texto ira acompanhar essa mudanga, respeitando a regra de sempre ser 1.6 da altura 
da fonte. 

Nao estamos alterando a altura da fonte por enquanto - a propriedade 
font-size, para utilizar o valor padrao do navegador, que costuma ser de 16 px em 
desktops e notebooks, enquanto outros aparelhos ou navegadores com configura¬ 
tes diferentes possuem um tamanho padrao diferente. Outro detalhe importante, 
e que estamos adicionado estes estilos a tag body. Desta forma, todos os elementos 
da pagina irao herdar essas regras “padroes” da nossa pagina, e podemos altera-las 
conforme a necessidade de cada elemento. 

O que eu mais gosto em Sao Paulo 

Passear na Avcnida Paulista! 

Um Aji principal* tmlpo* finanwlfiMi da ctdide. * uiTt^m po^ul d^rrj** op^^ri iS* rrfwt* nArrm nw. 

do ^ do e i I dt « 

Amu fjihii tit itriiiiJii flue <ruz*m a j.iiidi e j fjihi ^jE pi&u pv dfki. 

A PjuMU wmpr* t il-lufttfi- Q 4uc wr| filudc liMlpttlC rtf Fwilfl? 


Figura 2.3: O container de 96opx de largura e a alteragao de fonte. 


2.3 Bordas e margens 

Se analisarmos com mais detalhe o nosso conteudo, estamos falando sobre 3 luga- 
res diferentes, onde cada um possui um titulo e uma descrigao. Para essa definigao 
transparecer no nosso codigo, podemos colocar os elementos de cada lugar dentro 
de um novo elemento, para agrupar cada um. 

<div class= 'place 1 > 

<!-- 0 titulo e a descrigao da Avenida Paulista... — > 

</div> 

<div class= 'place 1 > 

<!-- Q titulo e a descrigao da Vila Madalena... --> 

</div> 

<div class= 'place '> 

<!-- Q titulo e a descrigao do Parque do Ibirapuera... —> 

</div> 

Esta alteragao nao tem impacto nenhum no visual da nossa pagina, mas nos da 
por onde adicionar um estilo para cada um dos 3 lugares, ja que agora existe um 
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elemento especifico que engloba o seu conteiido. Assim, adicionamos um pouco de 
espa^amento e bordas a cada um deles. 

.place { 

border-color: #CCC #999 #999 #CCC; 
border: lpx solid #CCC; 
margin-bottom: 20px; 
padding: lOpx; 

> 


Agora, cada elemento que contenha o class=' place 1 , ou lugar, tera uma borda 
solida - uma linha - de lpx. A principio todas as bordas sao do mesmo tom de 
cinza, mas vamos mudar as bordas da direita e de baixo para outro tom de cor, repe- 
tindo o mesmo cinza para as outras bordas, atraves do border-color. Alem disso, o 
margin-bottom, coloca 20px abaixo de cada urn dos elementos, adicionando espa^o 
entre eles e ao termino da lista. Enquanto a propriedade margin-bottom adiciona 
o espa^amento do lado de fora dos elementos, a propriedade padding adiciona o 
espa^amento dentro dele, que no caso e de lOpx em todos os lados. 

As trespropriedades - padding, margin e border - funcionam de maneira similar, 
sendo possivel definir um valor especifico para cada um dos 4 lados do elemento. 
Caso voce queria definir o valor para apenas um deles, e possivel utilizar a varia^ao 
-top/right/bottom/left, como o margin-bottom. Enquanto o uso da propriedade 
sem o sufixo vai aplicar o mesmo valor para todos os lados do elemento, ou voce pode 
informar uma lista de valores diferentes e eles serao aplicados em sentido horario - 
o primeiro sera para o topo (top), o segundo para o lado direito e assim por diante. 

Apesar dos lOpx de padding, o espa^amento entre a borda e o titulo aparenta ser 
mais do que isso. Isso e resultado do margin padrao do elemento h2 somado com o 
padding da div que encapsula. Para ajustar isso, podemos remover a margem do h2 
completamente. De brinde, adicionamos uma borda verde abaixo do titulo. 

.place h2 { 

border-bottom: lpx dashed #7E9F19; 
margin: 0; 

> 


Assim, todos os lados do elemento . place terao o mesmo espaqamento de lOpx. 
Este estilo so se aplicara as ocorrencias de h2 dentro de outro elemento, que possua 
a classe place. E diferente da borda solida de antes, utilizamos o dashed no lugar de 
solid, para criar um efeito diferente, com uma borda tracejada. 
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O que eu mais gosto em Sao Paulo 


Passear na Avenida Paulista! 


Um dos principals centres financeiros da tidade. a avenida Paulista tambem possui diversas opeQes de entretenimemto. 
Endere^o do Museu de Arte de S£o Paulo, MASP t doTeacro Gazeta e muitos outros, a reglao e de fadl acesso gramas as 
dlversas llnhas de onibus que cruzam a avenida e a Nnha de meer<3 que passa por batxo dels. 

A Avenida Paulista sempre e assume, O que sera que estac falando a respeito no Twit ter? 


Os bares da Vila Madalena 


Figura 24: As bordas e o espa^amento da classe ’place’. 


2.4 Um pouco de cor sempre e bom 

Hora de trocar o preto e branco da nossa pagina e colocar algumas cores. Primeiro, 
cuidaremos do fundo da pagina. Alem de uma nova cor nova, vamos combinar isso 
com uma imagem com um efeito de ruido, que sera aplicado em cima da cor de 
fundo, assim: 

body { 

background: #FFF1D6 url(images/noise.png) ; 

font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, 
sans-serif ; 
line-height: 1.6; 

> 
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O que eu mais gosto em Sao Paulo 

Passear na Avenida Paulista! 

Um dos principals centres financeiros dacidade, a avenida Paulista tambdm possui diversas op^Oes de entretenimento. 
Enderegs do Museu de Arte de Sao Paulo, do Teacro Gazeta e muitos outros, a reg&o e de facii acesso gragas as 
diversas llnhas de on i bus que cruzam a avenida e a llnha de metr£ que passa por balxo dela. 

A Avenida Paufista sempre e assunto. O que sera que estac falando a respeito no Twiner? 

Os bares da Vila Madafena 


Figura 2.5: O fundo da nossa pagina. 


Como a imagem ira preencher todo o fundo do body, nao precisamos nos pre- 
ocupar com as propriedades de background-repeat ou background-position, que 
sao usadas para controlar mais detalhes sobre a aplica^ao das imagens de fundo. 
Lembre-se se ter a imagem noise.png no caminho correspondente ao que esta no 
codigo - no nosso caso, em um diretorio images que esta junto ao arquivo .html da 
pagina. Voce pode baixar este arquivo em http://saopaulo.herokuapp.com/images/ 
noise, png 

Agora, os elementos . place precisam de um fundo diferente, para ajudar a Lei- 
tura dos textos. Podemos entao colocar um fundo branco neles. 

.place { 

background-color : #FFF; 

border: lpx solid #CCC; 

border-color: #CCC #999 #999 #CCC; 

margin-bottom: 20px; 

padding: lOpx; 

> 


Melhor, certo? Como estamos apenas mudando a cor de fundo, podemos utilizar 
tanto a propriedade background quanto o background-color, a escolha e livre. 
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O que eu mais gosto em Sao Paulo 


Passear na Avenida Paulista! 

Um dos principals centres financeiros da cidade. a avenida Paulista tambem possui diversas opeQes de entretenimemto. 
Endere^o do Museu de Arte de sao Paulo, MASP t doTeacro Gazeta e muitos outros, a regiao e de facil acesso gramas as 
dlversas llnhas de onibus que cruzam a avenida e a Mnha de metr^ que passa por bated dela, 

A Avenida Paulfsta sempre e ass unto, O que sera que estao falando a respeito no Twit ter? 

Os bares da Vila Madalena 


Figura 2.6: O fundo branco da div em cima do fundo da pagina. 


Podemos tambem mudar a cor dos links existentes no nosso conteudo. Desde 
que eles mantenham uma diferen^a em rela^ao ao resto do texto, essa mudan^a nao 
prejudica a usabilidade ou o visual da pagina. Podemos trocar o tom de azul (cor 
padrao dos navegadores para links), e mudar os links para negrito, o que e bastante 
simples. 

.place a { 
color: #2CS8A7; 
font-weight: bold; 

> 


ssa por baixo dela, 
eito no Twitter? 


Figura 2.7: O novo estilo dos links. 


Assim, os 3 links da pagina estao com um estilo proprio, mas deixamos um link 
importante de fora, o da propria pagina. E comum adicionar um link ao titulo da 
pagina que leve para a pagina principal do site, que no nosso caso e a propria pagina 
em que estamos. Vamos mudar o codigo HTML do nosso hi para adicionar um link. 

<hl><a href='’>0 que eu mais gosto em Sao Paulo</ax/hl> 
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E e claro, uma cor especial para este link: 
hi a { 

color: #7E9F19; 
text-decoration: none; 

> 


O que eu mais gosto em Sao Paulo 


Figura 2.8: Agora o nosso titulo esta verde! 


Reutilizamos a cor verde das bordas tracejadas que vimos anteriormente, e ti- 
ramos o sublinhado do texto do link. Tambem podemos mudar a cor do link para 
quando se posicionar o cursor em cima dele, utilizando um pseudo-seletor do estado 
hover do elemento. 

hi a: hover { 

background-color : #7E9F19; 
color: #FFF; 

} 

Agora, ao se posicionar o cursor do mouse no titulo da pagina, o verde que antes 
estava no texto ira preencher o fundo do elemento, e o branco ira tomar o lugar do 
verde do texto, Quando o cursor sair de cima do titulo da pagina, o link voltara ao 
seu estilo traditional. 

Alem do hover, existem pseudo seletores que podem ser utilizados para adici- 
onar um estilo especifico a outros estados de links ou outros elementos, e os mais 
tradicionais sao: 

• : focus, para elementos que estejam focados pelo teclado, como links ou cam- 
pos de um formulario; 

• : visited, para endere^os ja visitados pelo usuario; 

• : active, para o instante onde o elemento esta sendo pressionado pelo mouse. 
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O que eu mais qosto em Sao Paulo 


Figura 2.9: O efeito de :hover do titulo. 


Se for necessario trocar as cores do site, seria o caso de alterar apenas as ocor- 
rencias de color, background, background-color e talvez de border. 


2.5 Primeiro contato com imagens 

Um dos elementos classicos que nao utilizamos ate agora e o img, utilizado para 
exibir imagens que fazem parte do seu conteudo - diferentes de imagens utilizadas 
no estilo da sua pagma, que sao aplicadas utilizando a propriedade background via 
CSS. Vamos dar uma olhada nisso enquanto adicionamos algumas fotos na descri^ao 
de cada um dos lugares de Sao Paulo que estamos falando. Vamos adicionar uma tag 
img entre cada h2 e os paragrafos de cada um dos elementos .place. 

<div class= 'place 1 > 

<h2>Passear na Avenida Paulista!</h2> 

<img src= 'images/paulista.jpg' alt="Q ceu da avenida Paulista, 
foto por http://www.flickr.com/photos/jairo.abud 1 ^ 

<!-- os paragrafos vem aqui... --> 

</div> 

<div class= 'place 1 > 

<h2>0s bares da Vila Madalena</h2> 

<img src= 'images/piola.jpg' alt="A varanda do Armazem Piola, 
foto por Fernando Moraes"> 

<!-- os paragrafos vem aqui... --> 

</div> 

<div class= 'place 1 > 

<h2>0 Parque do Ibirapuera</h2> 

<img src= 'images/ibirapuera.jpg' alt="Q Parque do Ibirapuera, 
por http://www.flickr.com/photos/soldon/ "> 

<!-- os paragrafos vem aqui... --> 

</div> 
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O atributo src deve conter o caminho para o arquivo da imagem, enquanto o 
alt e o um texto alternative para a imagem caso ela nao seja carregada pelo nave- 
gador (no caso do caminho estar errado ou algum problema na rede do usuario). 
Este mesmo texto pode vir a ser usado no atributo title, para exibir um tooltip na 
imagem, mas deixamos ele de lado para manter o exemplo simples. 

Enquanto o navegador se encarrega de descobrir a largura e a altura da ima¬ 
gem, tambem podemos fixar esses valores com os atributos width e height - caso 
o tamanho real da imagem seja diferente, o navegador ira redimensionar a imagem 
conforme o necessario. Fixar a altura e largura da imagem no HTML tambem e util 
para que o navegador ja “reserve” os pixels necessarios para exibir a imagem, evi- 
tando que o conteudo seja empurrado para os lados conforme e feito o download da 
imagem, evitando o chamando repaint da pagina. Caso queira praticar isso, nossas 
imagens estao com 156px de largura e de altura. 


ATEN^AO AOS TAMANHOS 

Imagens de tamanho muito grande sao um dos principals responsaveis por 
problemas de performance na web. Mesmo se voce fixar um tamanho para 
as suas imagens que seja menor do que o seu tamanho real, o arquivo ori¬ 
ginal sera transferido pela rede e pode causar uma certa lentidao caso as 
suas imagens sejam pesadas, entao hque atento ao tamanho das imagens de 
fundo, icones e fotos das suas paginas. 

Por isso, nao deixe de comprimir as suas imagens para economizar diversos 
bytes de trafego. Caso voce utilize o Mac OS X, aconselho a usar o Image- 
Optim (http://imageoptim.com/) para esta tarefa 
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O que eu mais gosto em Sao Paulo 

Passear na Avenida Paulista! 



Urn dos principals cerrtros fircanceiros da cidade, a avenida Paulista tambem | 
Endere<;o do Mu seu de Arte de Sao Paufo, MASP t do Teatro Gazeta e muitos c 
diversas linhas de onitaus que cruzam a avenida e a llnha de metro que pass2 


Figura 2.10: a foto da Avenida Paulista, mas parece que quebramos algo no nosso 
layout. 


Criamos um problema no layout da nossa pagina com essas image ns. O img e os 
paragrafos nao fleam um do lado do outro, e o texto so aparece logo abaixo da foto. 
Isto ocorre porque a imagem e um elemento inline e o elemento p e block. Vamos 
entrar em mais detalhes a respeito disso na se^ao|6.3| mas o que precisamos agora e 
uma solu^ao para a nossa pagina. Primeiro, vamos aplicar alguns estilos as imagens 
e utilizar a propriedade float para alinhar os elementos horizontalmente. 

.place img { 

border: lpx solid #7E9F19; 
float: left; 
margin: lOpx lOpx 0 0; 
padding: 2px; 

} 


Isto vai adicionar uma borda verde na imagem, e um e spacemen to entre ela e os 
demais elementos - como as bordas da div e o ii2 acima dela. Apesar de solucionar o 
problema de posi^oes dentro da div sobre a Avenida Paulista, nos demais elementos 
a imagem vaza para fora da div - um dos problemas classicos de se usar a proprie¬ 
dade float. Vamos resolver isto adicionando um elemento vazio com a classe clear 
logo apos os paragrafos. Ele ira garantir que as imagens continuem dentro do seu 
respectivo div e que eles terao a altura adequada para conter todo o seu conteudo. 

<div class= 'place 1 > 

<h2>Passear na Avenida Paulista! </h2> 
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<!-- a foto e os paragrafos aqui... —> 

<div class 3 1 clear 1 ></div> 

</div> 

<div class=’ place 1 > 

<h2>0s bares da Vila Madalena</h2> 

<!-- a foto e os paragrafos aqui... —> 

<div class 3 'clear 1 ></div> 

</div> 

<div class 3 ' place 1 > 

<h2>0 Parque do Ibirapuera</h2> 

<!-- a foto e os paragrafos aqui... —> 

<div class 3 'clear 1 ></div> 

</div> 

E o CSS da classe . clear: 

.clear { 
clear: both; 

> 

Este e um truque bastante conhecido e utilizado, mas nao sou muito fa dele de- 
vido ao elemento vazio extra que e adicionado ao HTML, sem nenhum valor seman¬ 
tic o, que existe apenas para resolver um problema do estilo da pagina. Vamos voltar 
a este assunto sobre o float e aprender uma solu^ao mais pratica e elegante para 
isto. 
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O que eu mais gosto em Sao Paulo 


Passear na Avenida Paulista! 



Dm dos principals certtros financeiros da ddade, a aven 
op^oes de entretenlmento. Enderego do Museu de Arte 
muitos outros s a regrao 4 de faciJ acesso gragas as divei 
g a linfta de metrfi que passa por baixo dela. 

A Avenida Paulista sempre e assunto. O que sera que e; 


Os bares da Vila Madalena 


Figura 2.11: A foto com seu estilo, posicionada corretamente. 


2.6 Adicionando elementos secundarios 

Bern, ja temos todo o conteudo da nossa pagina no seu devido lugar com um pouco 
de CSS para deixar tudo mais apresentavel. Precisamos agora de mais alguns elemen¬ 
tos adicionais para complementar a nossa pagina, como um rodape e uma barra la¬ 
teral com mais conteudo, no caso uma lista adicional de outros lugares de Sao Paulo, 
mas sem describes ou fotos como os que temos atualmente. Vamos primeiro ao 
rodape, o mais simples dos dois, com o seguinte codigo, a ser adicionado no final do 
elemento . container. 

<div class= 'footer 1 > 

<p>Parte do livro "HTML5 e CSS3: Domine a web do futuro. "</p> 

</div> 

E um pouco de CSS, e claro. 

.footer { 
font-size: 12px; 
text-align: center; 

} 

O rodape tera uma fonte menor e sera centralizado. Diferente da margem auto- 
maticaque utilizamos no . container anteriormente, estamos centralizando o texto, 
e nao o elemento do rodape inteiro. 
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O proximo da nossa lista e a barra lateral. O HTML dela deve ser adicionando 
antes do rodape que acabamos de criar. 

<div class= 'sidenote 1 > 

<h3>E existem muitos outros lugares interessantes na cidade.. .</h.3> 
<ol> 

<li>0 Mercado Municipal .</li> 

<li>A Sala Sao Paulo. </li> 

<li>0s estadios dos principals times de futebol da cidade. </li> 
<li>Diversos museus, como o Memorial da America Latina, Museu da 
Lingua Portuguesa e o Museu do Ipiranga. 

</li> 

<li>E mais!</li> 

</ol> 

</div> 

Mais uma div, um titulo em um h3 e uma lista ordenada, a tag ol, com alguns 
itens a mais. E e claro que este elemento acompanha um pouco de CSS. 

.sidenote { 

background-color: #FFFBE4; 
border: lpx solid #C9BC8F; 
padding: lOpx; 

> 

.sidenote h3 { 
font-size: 14px; 
margin-top: 0; 

> 

.sidenote ol { 
font-size: 12px; 

> 
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E&xistem muitus culros luyares. rnteressarttes na cldade... 

1. o Mercado Municipal. 

2 . A Sal a Sis Paula. 

3. Oi Kiidlos do& principal* limes tie futebol da cl Jade, 

4 Diwfiftos. rr-ufinus, como o Memorial da America Latina, Muieu da L'nyua P«iugue*a e a Museu do I paanga, 
5. E maii! 


Parte do livro HTML5 e C5S3. Dormne a wed do futuro.' 


Figura 2.12: O estilo da nossa barra lateral. 


Um pouco de cor e espa^amento, da mesma forma que vimos anteriormente, e 
alguns ajustes do tamanho das fontes ja que este elemento nao deve chamar mais 
aten^ao do que o nosso conteudo principal. E por ser uma barra lateral , ela nao 
deveria pegar toda a largura disponivel, e se encaixar ao lado do nosso conteudo 
principal. Outro caso de uso para o float, como utilizamos no caso das imagens. 
Primeiro, precisamos colocar todo os eiementos com a classe place dentro de uma 
div nova para separa-Ios do resto do conteudo, e entao adicionar o estilo necessario 
para este elemento ficar sempre a esquerda da pagina. 

<div class= 'places 1 > 

<!■— conteudo principal vem aqui... —> 

</div> 

.places { 
float: left; 
width: 660 px; 

> 


Agora, o conteudo principal tera 660px de largura, e o restante (dos 960px que 
definimos para a largura total da nossa pagina) fica disponivel para a barra lateral 
Entao vamos atualizar o estilo dela para posiciona-la no seu lugar de direito. 

.sidenote { 

background-color : #FFFBE4; 
border: lpx solid #C9BC8F; 
float: right; 
padding: lOpx; 
width: 260px; 

} 
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Com a propriedade float com o valor right, a barra lateral vai ficar sempre no 
lado direito, enquanto o conteiido esta a esquerda, E a largura fixa, que e menos do 
que o espa^o restante da pagina, deixa um espa$o a mais entre os elementos e garante 
que as suas bordas nao vao se juntar e deixar o visual um pouco confuso. 

So o que falta e colocar o rodape de volta no seu lugar. Com o uso do float nos 
outros elementos, ele agora foi parar abaixo da barra lateral, enquanto deveria estar 
abaixo de tudo, como antes. Simplesmente adicionamos a classe clear ao elemento 
do rodape, e voila! 

<div class= 'footer clear ’> 

<p>Parte do livro "HTML5 e CSS3: Domine a web 
</div> 


Passear na Avenida Paulista! 

Um dos principals centres financeiros da cidade, a avenida 
Pajlista tambem possui diversas op<;oes de emretenimento. 

Endere^o do Museu de Arte de Sao Paulo, MASP, do Teatro 
Gazeta e muitos outros. a regiao 6 de fdcil acesso gramas as 
diverts llnhas de dnibus que truzam a avenida e a linha de 
merrfi sue oa&sa bqf baixo dels. 

Figura 2.13: A barra lateral, no seu devido lugar. 



do futuro,"</p> 


E existent muitos outros lugarcs 
interess antes fia cidade*.. 

1. O Mercado Mu 'licipai. 

2 . A Sale 5 Id Pauio 

3. Os e atari ios dos principals times dt 
fijtetMi da citlade. 

4. Divereos mu seu 5, como 0 Memorial 
da America Lacuna. Mttseu da lingua 
Po.-tuflu&sa a 0 Mu seu do Ipira'ioa. 


2.7 Fa^a para SUA CIDADE TAMBEM! 

Foi simples, nao? Apos apenas algumas paginas, ja temos um exemplo simples, ele¬ 
gante e funcional de um layout com uma pequena pitada de CSS. Vamos apren- 
der muito mais nos proximos capitulos, inclusive tecnicas que poderiam deixar esse 
exemplo muito mais interessantes. 

Caso voce esteja come^ando nesse mundo de HTML e CSS, que tal implementar 
uma pagina similar para a sua cidade? Coloque-a no ar e eu ficarei muito contente 
de fazer um link para ela. Apenas me conte por e-mail o endereqo da sua pagina. 
Voce pode enviar para casadocodigohtmlcss@gmail.com. 
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Capitulo 3 

HTML5: o que mudou? 


O surgimento do HTML5 mudou muitas coisas no mundo do desenvolvimento web, 
com novos elementos, novas funcionalidades e diversas outras novidades que pos- 
sibilitam experiences melhores e integrates que antes eram apenas desejos e so- 
nhos dos desenvolvedores por ai. Mesmo com algumas funcionalidades ainda em 
processo de definite, ja podemos aproveitar diversas das novidades que o HTML5 
trouxe para o mundo. 

Vamos passar por algumas delas, inclusive algumas que sao referente ao codigo 
que escrevemos: novos elementos, mudancas de sintaxe e atributos personalizados. 
Mas nao deixe de conferir no capitulo [n] sob re por onde aprender mais a respeito de 
outras novidades. 

3.1 Escrevendo menos e fazendo mais 

Uma das minhas mudancas prediletas e como a tarefa de escrever HTML ficou mais 
simples. Diversos pontos pequenos se tornaram opcionais ou desnecessarios e o que 
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antes era repetitivo deixou de ser parte da nossa rotina e como consequencia, o nosso 
codigo se torna mais simples e facil de se ler. 

Um otimo exemplo disso e o Doctype do HTML5, a instru^ao que informa aos 
navegadores como ele deve processar o codigo HTML, que ficou bastante simples 
em rela^ao ao seus antecessores. No HTML 4 ou no XHTML 1, a linha do Doctype 
e algo assim: 

<!- DTD do HTML 4 , em modo "strict". 

<!DOCTYPE HTML 

PUBLIC "-//U3C//DTD HTML 4 . 01 //EH" 

"http: //www. w3 . org/TR/html4/strict . dtd"> 

< !— DTD transitional do XHTML --> 

<‘DOCTYPE html PUBLIC "-//V3C//DTD XHTML 1.0 Transitional//EH" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml 1-transitional . dtd"> 

Dificilmente alguem vai conseguir lembrar de tudo isso, e geralmente deixamos 
a responsabilidade de escrever a linha do Doctype para ferramentas de gera^ao de 
projetos ou de codigo. Agora, ele esta tao pequeno que e bem facil escrever ele de 
cor. 

<!DOCTYPE html> 

Nao existe mais URL de dtd ou tipo de Doctype para se preocupar. Bastante 
simples! 

Alem disso, as tags de link e script tambem emagreceram um pouco. Agora, 
para reterenciar arquivos de CSS e JavaScript, voce nao precisa mais informar o atrb 
buto type. Caso ele nao esteja presente, o navegador ira assumir que o arquivo e do 
tipo text/css ou text/javascript. 

<!-- 0 que antes era assim... —> 

<link rel="stylesheet 11 href ="normalize . css" type^'^ext/css" /> 

<script src="prefixfree.min.js" type-” text/javascript "></script> 

<!— ...pode ser escrito assim --> 

clink rel="stylesheet 11 href^'normalize.css"> 

cscript src="prefixfree.min.js "></script> 

Se voce comparar os exemplos anteriores da tag link, pode notar que a barra no 
final da tag tambem nao esta mais presente - mais um detalhe que se tornou opcional 
no HTML5. Tags que nao precisam ser fechadas, como link, input, img, br e meta, 
nao precisam mais terminar em />, apenas >. 
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3.2 Atributos personalizados 

Em alguns casos precisamos adicionar metadados ou informa^oes extras no nosso 
HTML, mas nao queremos depender de elementos adicionais que nao possuem valor 
de verdade a nossa pagina. Um exemplo muito comum, e fazer com que alguma 
biblioteca leia uma tag a procura de alguns atributos especificos, como por exemplo, 
um atributo indicando que a requisite de um link deve ser feita assincronamente 
via AJAX. 

<a href= 'posts/2 1 remote^ true' >Apagar</a> 

O atributo remote nao existe na defini^ao da tag a. Esta abordagem funcionaria 
em paginas de HTML 4, por exemplo, mas o seu codigo estaria invalido de acordo 
com a ferramenta de valida^ao do W3C. 

Uma forma de resolver isto sao com atributos personalizados, que fazem parte 
do dommio do seu projeto e ao mesmo tempo mantem o seu codigo valido. Por 
exemplo, para definir um link que ira apagar um post do seu blog, podemos utilizar 
algumas configurates via atributos personalizados com o prefixo data-. 

<a href=' posts/2 1 data-remote= 'true 1 data-method= 'delete' 
data-confirm=’ Voce tem certeza disto? 1 >Apagar</a> 

Desta forma, o seu JavaScript pode ler os atributos de data-* e executar o co- 
digo necessario para apagar o post, pedindo uma confirmagao do usuario com uma 
mensagem personalizada. 

3.3 Tags novas para elementos antigos 

No campo da semantics existe um problema complicado de se lidar, que e o uso 
excessive da tag div. Um verdadeiro coringa do HTML, que por ser um elemento 
generico, acabamos utilizando para definir quase toda a estrutura das nossas paginas, 
desde o cabe^alho ao rodape. 

Embora isso nunca tenha impedido ninguem de colocar um site de sucesso no ar, 
acaba gerando um certo ruido e uma necessidade de se utilizar classes CSS para iden- 
tificar o papel de cada div dentro do que criamos. Com isso, o HTML5 traz alguns 
elementos para suprir essa falta de tags mais semanticas e descritivas para alguns 
elementos classicos em diversos cenarios, como cabe^alhos, menus de navega^ao e 
areas de conteudo secundario. 

Algumas das alternativas existentes sao: 
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• section - utilizado para representar uma se$ao generica, geralmente com um 
cabe^alho proprio e o seu conteudo; 

• nav - representa^ao de um bloco principal de links de navega^ao - nem todo 
grupo de links deve ser tratado como um nav; 

• aside - a tag as ide pode ser utilizada para representar uma se^ao de conteudo 
secundario ou auxiliar a outro peda^o de maior importanda. Cita^oes, links 
de referenda ou notas adicionais, por exemplo; 

• header - referente ao cabe^alho de uma se^ao especifica (ou da propria pa- 
gina), contendo titulos, introduces e outros elementos similares; 

• footer - o rodape referente a um bloco de conteudo; 

• article - finalmente, o article identifica o conteudo em si, como uma no- 
ticia de um portal, um post em blog ou um comentario em uma lista de co- 
mentarios. 


<heoder> 


<nov> 


<section> 


1 - <Grticle> 


3 - <orticle> 


3 - <article> 


<oside> 


<footer> 


Figura 3.1: O papel de cada elemento novo em uma pagina completa. 
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Um ponto crucial destas mudan^as e que podemos definir diversas segoes inde- 
pendentes entre si, cada uma com a sua hierarquia propria, Por exemplo, podemos 
ter 2 elementos hi, cada um em sua set^ao, ou podemos criar um header para o ca- 
be^alho de um blog, com o titulo e links de navega^ao, e cada post, devidamente 
criado em um article, ter um header com o titulo do post e a data em que ele foi 
publicado, por exemplo. Isso pode ser bastante util para se arquitetar paginas mais 
modulares, para melhorar a qualidade e a facilidade de manuten^ao do nosso codigo. 


<beoder>0 meu blog sobre HTML5 

</headers 

Pdflina principal | Sobre 0 outor | Cantata 

</mv> 


«artide> 

<heoder> Utilizando as tags <header> e <article>... 

Pubticadv a 3 dies atras 

ip sum dolor sit omet, oarisectetur adipisicing slit, sed do eiusmod tempor incididunt ut la bore 
et dolor e mcgna clique. Ut enim od minim v-eriiom, quis nest rod exer citation ullamoo laboris nisi 
ut aliquip -ex ea commodo oon&equct. Duis aute irure dolor in repreherid-erit in valuptate velt 
esse cillum dolore eu fugiat nulla periatur. Except eur sint occaecot aipidatot non proident, sunt 
in oulpa qui officio deserunt rrallit -anim id e&t laborum.Lorem ipsum dolor sit cmet, con&eotetur 
adipisicing elit, sed do eiusmod tempor incididunt ut la bore et dolore magne aliqua. Ut enimad 
minim veniom, quis nostrud exercitation ullamco loboris nisi ut aliquip ex ea commodo 
consequat. Duis -oute irure dolor in reprehenderit in voluptate velt esse cillum dolore eu fugiot 

</articles 


Figura 3.2: Um mockup do exemplo descrito - a tag ’<header>’ pode aparecer em 2 
se^oes diferentes. 


Com base nesta Jista fica facil de pensar em diversos lugares onde uma tag div foi 
utilizada com alguma classe para identificar o seu proposito. O que acha de praticar 
um pouco esses elementos novos na nossa pagina sobre Sao Paulo? 

3.4 Refatorac^ao da pagina de Sao Paulo 

Nossa pagina O que eu mais gosto em Sao Paulo tem alguns pontos que podemos 
substituir o uso da tag div por alguns dos elementos novos do HTML5. Nao tere- 
mos nenhuma mudan^a visual na pagina, apenas a semantica do codigo escrito ira 
mudar. A diferen^a no tamanho do arquivo ou na quantidade de codigo escrito e 
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insignificante, entao nao vamos nos preocupar com isso. 

Vamos comegar pelo nosso conteudo principal, os 3 lugares de Sao Paulo que sao 
descritos com a classe .place. Podemos alterar esses elementos para utilizar a tag 
article, removendo a necessidade da classe para identificar estes elementos. 

<article> 

<h2>Passear na Avenida Paulista!</h2> 

<img src= 'images/paulista.jpg' alt~"0 ceu da avenida Paulista, foto 
por http://www.flickr.com/photos/jairo_abud"> 

<p> 

Um dos principals centres financeiros da cidade, a avenida Paulista 
tambem possui diversas opgoes de entretenimento. Enderego do Museu de 
Arte de Sao Paulo, <em>MASP</em>, do Teatro Gazeta e muitos outros, 
a regiao e de facil acesso gragas as diversas linhas de onibus que 
cruzam a avenida e a linha de metro que passa por baixo dela. 

</p> 

<p> 

A Avenida Paulista sempre e assunto. 0 que sera que estao falando a 
respeito no <a href = 'https://twitter.com/#!/search/Av.7,20Paulista' 
target= 1 „blank' >Twitter</a>? 

</p> 

</article> 

E claro, alterar o nosso CSS para refletir esta mudanga, trocando onde antes usa- 
vamos a classe place pela tag article. 

O proximo lugar que podemos alterar e o elemento com a classe . sidenote, a 
nossa barra lateral, que possui um conteudo adicional ao que mexemos anterior- 
mente. Um otimo candidato a se tornar um aside. 

<aside> 

<h3>E existem muitos outros lugares interessantes na cidade.. .</h3> 
<ol> 

<li>0 Mercado Municipal .</li> 

<li>A Sala Sao Paulo. </li> 

<li>Os estadios dos principals times de futebol da cidade. </li> 
<li>Diversos museus, como 0 Memorial da America Latina, Museu da 
Lingua Portuguesa e o Museu do Ipiranga.</li> 

<li>E mais!</li> 

</ol> 

</aside> 
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Sem deixar de alterar o CSS, trocando as referencias a classe . sidenote pela tag 
aside. 

aside { 

background-color : #FFFBE4; 
border: lpx solid #C9BC8F; 
float: right; 
padding: lOpx; 
width: 260px; 

> 

aside h.3 { 

font-size: 14px; 
margin-top: 0; 

> 

aside ol { 

font-size: I2px; 

} 


E for final, o uso da dasse . footer no nosso rodape e outro caso obvio de mu- 
dan^a. 

<footer class= 'clear 1 > 

<p>Parte do livro "HTML5 e CSSS: Domine a web do future. "</p> 
</footer> 

footer { 

font-size: 12px; 
text-align: center; 

> 

Existem outros pontos que poderiamos mudar no nosso HTML: substituir a div 
com a dasse .places por um section, e colocar um header em volta do titulo da 
nossa pagina hi, mas nao precisamos chegar a tanto. 

Nossos usuarios nao notariam esta mudan^a, mas estamos agregando mais se- 
mantica ao nosso codigo e facilitando a leitura dele, para manutenc^oes futuras. 
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Preenchendo alguns buracos 

Quando um navegador nao possui suporte a uma tag desconhecida para ele, 
o elemento e exibido na pagina, porem nenhum estilo e aplicado. E assim 
que versoes antigas do Internet Explorer, por exemplo, tratam elementos no- 
vos como o sect ion e o header. Se voce for utilizar algumas dessas tags e 
precisa dar suporte a navegadores que ainda nao entendem elementos no- 
vos do HTML5, a solui^ao e utilizar um pouco de JavaScript para forgar a 
aplica^ao de estilo pelo navegador. 

O script mais utilizado para isto e o htmlsshiv {https://github.com/aFarkas/ 
htmlsshiv/), Que alem de tratar a aplica^ao de estilos nesses elementos, tam- 
bem trata alguns problemas relacionados a impressao da pagina que utilize 
tags do HTML5. 


3.5 Seja pragmatico 

Enquanto este mundo de novas possibilidades e tags a nossa disposi^ao pode pa- 
recer a solu^ao, e muito facil se perder no merito das discussoes e defini^oes do 
tipo de "isto aqui deveria ser um article ou um section ?” Continuar utilizar a tag 
div nao causa mal nenhum, e voce sempre pode voltar no seu codigo depois e tro¬ 
car alguma tag por outra que voce considere mais adequada. Divya Manian fala 
bastante sobre os problemas que essa busca incessante por semantica pode causar 
em um post na Smashing Magazine http://coding.smashingmagazine.com/2011/11/ 
11/our-pointless-pursuit-of-semantic-value/ O ponto importante e nao perder o 
foco do que realmente precisamos fazer. 
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O que todo desenvolvedor precisa 
saber sobre CSS 


Entender a sintaxe e as propriedades do CSS e vital, porem mais importante do que 
isso e aprender alguns truques e tecnicas para resolver problemas do dia a dia. So 
saber a linguagem nao e o sufkiente, e preciso saber como usa-la e quais sao as suas 
op^oes quando precisar colocar a mao na massa. 

4.1 A INCOMPATIBILIDADE DOS BROWSERS E A RAZAO DOS 
RESETS DE CSS 

Todos os navegadores, das primeiras versoes do Internet Explorer aos navegadores 
de celulares e tablets, possuem estilos padroes que sao aplicados em todas as paginas, 
como o negrito da tag strong, a borda do legend e os tamanhos de fonte diferentes 
do hi ao h6. E e claro que existem diferen^as entre os padroes de um navegador para 
outro, Algumas dessas diferen^as, por menores que possam ser, costumam afetar o 
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nosso trabalho, impactando no resultado final das nossas paginas quando visuali- 
zadas em diferentes navegadores e solu^oes espedficas para estes cenarios predsam 
ser utilizadas. 

Para entender melhor esta situaqao, podemos testar um pouco de HTML, sem 
estilos, e ver como que ele sera exibido no Google Chrome e no Firefox, por exemplo. 

<hl>Titulo</hl> 

<fieldset> 

<legend>Campos do formulario</legend> 

<abbr title= "Hypertext Markup Language ">HTML</abbr> 

<p><label>Faga a sua pesquisa: </label><input type-"search.' t ></p> 
<textarea>Um pouco de texto</textarea> 

</fieldset> 


Titulo 


Campos do fommulirici 
HTML 

Fuqj a sua pesquisa: 

am pouco de tcxta 

_ A 


Figura 4.1: O resultado no Firefox 9.0.1 


Titulo 

—Campos do fommiario 
HTML 

Fa?a a s'ja pc&qui&a: 


Um pouco de 


A 


Figura 4.2: O resultado no Chrome 19.0 


Conseguimos notar leves diferenqas, que podem impactar o nosso trabalho final. 
As bordas do f ieldset, a ausenda do sublinhado no elemento abbr no Chrome e 
as diferencas dos campos de busca e de texto. 
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Como qualquer problema recorrente no mundo de desenvolvimento, solu^oes 
ja foram criadas para nao nos preocuparmos com coisas assim e focarmos no traba- 
lho de verdade. Os arquivos de reset, como sao chamados, possuem uma gama de 
regras para alinhar os navegadores em um mesmo patamar de estilo, seja corrigindo 
problemas ou resolvendo inconsistencias. 

Talvez o niais famoso dos resets seja o Escrito pelo Eric Meyer, que criou a versao 
1,0 em 2008 - bastante tempo, nao? - sua ultima atualiza^ao foi feita em 2011, e voce 
pode encontra-la no proprio blog do seu criador, http://meyerweb.com/eric/tools/ 
css/reset/ 

Os desenvolvedores do Yahoo! tambem criaram um reset solido, parte do Yahoo! 
User Interface Library, disponivel no site http://yuilibrary.com/. Um ponto negativo 
do reset do Yahoo! e que ele remove alguns padroes que eu considero importante 
em alguns elementos, como o negrito da tag strong e a marcaqao lateral de itens em 
uma lista. 

Normalize.css 

O Normalize.css (http://necolas.github.com/normalize.css/), e o reset que esta- 
mos utilizando neste livro e toma uma abordagem diferente a este problema. No 
lugar de sobrescrever diversas propriedades para definir um novo padrao de estilo 
para os navegadores, ele apenas adequa os pontos diferentes, preservando diversos 
estilos aplicados pelos navegadores, alem de aproveitar para definir algumas melho- 
rias sutis, removendo o outline de links e melhorando a formata^ao de elementos 
pre, por exemplo. ||J 

O codigo fonte do Normalize e muito bem escrito e documentado, o que Ihe 
permite remover partes dele que nao te interesse ou entender melhor o que ele faz 
por debaixo dos panos. Confira o exemplo de codigo a seguir: 

/* 

* 1. Improves usability and consistency of cursor style between 

image-type 1 input 1 and others 

* 2. Corrects inability to style clickable 'input' types in iOS 

* 3. Removes inner spacing in IE7 without affecting normal text inputs 

* Known issue: inner spacing remains in IE6 

*/ 

button, 

input [type= M button”] , 
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input[type= M reset M ], 
input [type- "submit"] { 

cursor: pointer; /* 1 */ 

-webkit-appearance: button; /* 2 */ 
♦overflow: visible; /* 3 */ 

} 


Cada propriedade e devidamente documentada, e sabemos quais versoes dos 
navegadores precisa das corre^oes. Caso voce nao queria se preocupar com versoes 
do Internet Explorer abaixo da 8, por exemplo, voce pode remover do codigo fonte 
do Normalize as regras espedficas destas versoes. 

Tftulo 

Campos do formular to 

HTML 

Fa$a a gag pesquisa: 

Um pouoo de texta 


Figura 4.3: O nosso HTML de teste, agora com o Normalize.css 


Nao saia de casa sem o seu 

Independente de qual reset voce for usar, o mais importante e estar usando um, e 
fatpa disso parte do seu processo de desenvolvimento ao participar de novos projetos. 

Isto nao tira a responsabilidade de testar manualmente as paginas em diversos 
navegadores, mas impede que alguns problemas relacionados a posicionamento, ta- 
manhos e fontes apare^am do nada e voce tenha que dedicar tempo a esses problemas 
ao inves de se dedicar ao que precisa ser criado. 

4.2 Compreendendo o Box model 

Nao importa quais cores, imagens de fundo ou posiqao voce adicionar em um ele- 
mento, ele sempre sera tratado como uma caixa. Isto pode nao ser perceptlvel a 
primeira vista, mas basta comeqar a usar um inspetor de elementos como o Firebug 
ou o console do WebKit e voce ira se acostumar com esta abordagem. O Box model 
e como as propriedades de CSS compoem as dimensoes, onde alem do width e do 
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height, as propriedades border e padding tambem influenciam no resultado final, 
mas de uma forma um tanto quanto confusa. Considere o codigo a seguir. 

.button { 

border: lpx solid # 999 ; 
height: 26 px; 
padding: 5 px 15 px; 
width: 90 px; 

> 


Um botao 


Esta classe button, ao ser aplicada em um elemento qualquer, ira ocupar 122px 
de largura e 38px de altura na sua pagina. Isto acontece por que os valores de padding 
e border sao somados a largura e altura definidas, fazendo com que as propriedades 
width e height sejam responsaveis por definir apenas a largura e a altura do seu 
conteudo, e nao do elemento como um todo. Alem da confusao que pode ser gerada 
ao se calcular os tamanhos de antemao, isso torna bastante complicado o uso de 
valores com porcentagem nestas propriedades - um elemento com 100“/, de width e 
2px de bordas ficara maior do que os 100% definidos. Complicado, nao? 

Outro exemplo para ilustrar este problema: ambos elementos possuem o mesmo 
valor de width, mas o valor do padding do segundo o deixa com 300 px de largura. 

.box { 

background-color : LimeGreen; 
width: 250px; 

> 


.box-with-padding { 
background-color : LightBlue; 
padding: 0 25px; 
width: 250px; 

> 


<div class='box'>elemento sem padding</div> 

<br> 

<div class='box-with-padding'>elemento com padding</div> 
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elemento sem padding 

elemento com padding 


Figura 4.4: O padding do segundo elemento expande a sua largura. 


Esta regra do Box model aplicar estes valores a apenas o conteudo e nao utili- 
zar como limites fixos do elemento como um todo pode complicar diversos casos de 
diagrama^ao de elementos em paginas complexas, mas e possivel alterar este corn- 
portamento e nao ficar recalculando larguras e alturas baseado em bordas e espa^a- 
mentos. A propriedade box-sizing, uma das novidades do CSS 3, permite alterar 
esta regra de content-box para o valor border-box, que for$a o navegador a respei- 
tar estes limites e ocupar o espa^o interno do elemento com os valores de border e 
padding, no lugar de expandir o elemento. 

Desta forma, as duas defini^oes abaixo irao gerar elementos com a mesma lar¬ 
gura 

* { 

box-sizing: border-box; 

} 

.box { 

background-color : LimeGreen; 
width: 250px; 

} 

.box-with-padding { 
background-color : LightBlue; 
padding: 0 25px; 
width: 250px; 

> 
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elemento sem padding 

elemento com padding 


Figura 4.5: O box-sizing tornando ambos elementos do mesmo tamanho. 


4.3 Utilizando pseudo elementos 

Existem casos onde as tags que utilizamos para definir o nosso conteudo nao sao o 
suficiente para estruturar os elementos de interface que desejamos. Seja para tratar 
problemas de float, definir bordas adicionais ou algo similar, muitas vezes acabamos 
dependendo de elementos vazios para resolver estes problemas. Por exemplo, ao 
trabalhar com bordas arredondadas sem o uso de CSS 3, ja vi (e escrevi), coisas assim, 
onde o span e utilizado para criar as bordas do lado direito de um botao. 

<div class=' button'> 

<a href=' #' >Clique aqui</a> 

<span></span> 

</div> 

Ja foi muito comum utilizar solu^oes assim para trabalhar com sombras, bordas 
arredondadas, letras iniciais de titulos e outros detalhes de interface que nao conse- 
guimos criar apenas com o mmimo de codigo HTML. Mas existem alternativas bas- 
tante interessantes para isto, utilizamos apenas CSS. Sao pseudo elementos, que nao 
existem no nosso codigo HTML, mas podem receber estilos especificos e auxiliar 
a estruturar elementos mais complexos nas nossas interfaces. Os mais tradicionais 
deles sao os elementos ::before e : : after, que vivem antes e depois do conteudo 
de uma tag (e nao antes e depois da tag em si), e estao disponiveis para todas as tags 
que adicionarmos ao body da nossa pagina. 

4.4 DESENHANDO UMA FAIXA COM “ BEFORE” E ^AFTER” 

Vamos criar uma faixa que da a ilusao de que ela contorna um section que o con- 
tem, e os elementos : :before e :: after irao fazer o trabalho pesado para a gente. 
Come^amos com o minimo de HTML necessario, uma tag section e um titulo para 
a faixa. 
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<section> 

<hl>Um exemplo de pseudo elementos</hl> 

</section> 

Vamos adicionar urn pouco de CSS para defmir a largura do section e a posi^ao 
do titulo. 

section { 

border: lpx solid #000; 
height: lOOpx; 
margin: 40px auto; 
width: 400px; 

} 

hi { 

font -size: 1.2em; 
text-align: center; 

> 


Urn exemplo de pseudo elementos 


Figura 4.6: O elemento section com 40opx de largura. 


Vamos come^ar a transformar o nosso hi na faixa que queremos criar. Alem da 
cor } vamos posicionar as laterais da faixa para fora da se$ao. 

hi { 

background-color : #990000; 
color: #FFF; 
font-size: 1.2em; 
left: -lOpx; 
padding: 5px 0; 
position: relative; 
text-align: center; 
width: 420px; 

} 
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r 


Um exemplo de pseudo eMementos 


Figura 4.7: O lado frontal da faixa vermelha. 


Agora, temos lOpx de cada lado da faixa vazando pela se^ao, so precisamos criar 
o efeito da faixa contornando o section, utilizando pseudo elementos. Primeiro, 
vamos criar este efeito para o lado esquerdo da faixa, utilizando o :: before. 

hi ::before { 

border: 5px solid #7C0000; 
content : " 11 ; 
left: 0; 

position: absolute; 
top: -lOpx; 

> 



Um exemplQ de pseudo elementos 


Figura 4.8: Desenhamos um quadrado no canto da faixa com o pseudo elemento 
before’. 


Fazemos referenda ao before utilizando a mesma sintaxe de pseudo classes que 
utilizamos para links, com o : separando os elementos. 

Utilizando o position junto de coordenadas exatas com as propriedades %left 
e top, conseguimos posicionar o elemento exatamente no canto superior 
esquerdo da faixa e com uma borda de 5px, desenhamos um quadrado de 
lopx 

A propriedade content e utilizada para definir o conteudo do elemento - ja que 
nao estamos adicionando o elemento pelo HTML - e neste caso nao precisamos de 
conteudo algum. Para conseguir o efeito que queremos, precisamos transformar o 
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quadrado que criamos em urn triangulo, so precisamos de urn ajuste nas cores das 
bordas. 

hi ::before { 

border-color : transparent #7C0000 #7C0000 transparent; 

border-style: solid; 

border-width: 5px; 

content: 

left: 0; 

position: absolute; 
top: -lOpx; 

} 


I 


Um exempt® de pseud® element®® 


Figura 4.9: O quadrado se tornou uma aba da faixa. 


Trocando algumas das cores para transparent, conseguimos desenhar um tri¬ 
angulo no lugar do quadrado vermelho. Para duplicar este efeito no outro lado da 
faixa, utilizando o :: after, so precisamos inverter alguns detalhes - o que era feita 
com a propriedade left sera feito com a right, e as posi^oes da lista de cores tam- 
bem precisa ser modificada, desta forma. 

hi ::after { 

border-color: transparent transparent #700000 #700000; 

border-style: solid; 

border-width: 5px; 

content: "" ; 

position: absolute; 

right: 0; 

top: -lOpx; 

} 
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A i 


Um exemplo de pseudo eMementos 


Figura 4.10: A faixa completa, utilizando kbefore’ e kafter’ 


Feito! Criamos o efeito da faixa contornando a se^ao, sem precisar de novos 
elementos no HTML. 


k :After” OU tC ::AFTER"? 

E comum ver por ai o uso dos pseudo elementos before e after em duas 
formas diferentes: prefixada com dois pontos (: before) ou quatro pontos 
(: :before). Voce sabe a diferen^a entre eles? 

Efetivamente, nenhuma. A especifka^ao do CSS 2 criou a versao com dois 
pontos, mas ela foi mudada no CSS 3 para ser diferente das defini^oes de 
pseudo seletores. Navegadores modernos possuem suporte aos dois forma- 
tos, enquanto algumas versdes antigas so entender o formato de dois pontos 
do CSS 2. 


4.5 Decorand o mensagens 

Outra utilidade dos pseudo elementos e criar formas de botoes que antes so era pos- 
sivel com o uso de imagens de fundo. Usando uma logica similar a utilizada no 
exemplo da faixa, podemos criar um balao de ajuda com um indica^ao sobre o que 
ele e a respeito. Imagine o seguinte paragrafo, sendo usado em um formulario de 
cadastro de um site de um concurso qualquer: 

<p class='help'> 

Preencha 0 campo com um e-mail valido, assim poderemos entrar em 
contato com voce para informar o resultado do nosso concurso. 

</p> 

Podemos adicionar um pouco de estilo e transformar este paragrafo em uma 
caixa de ajuda. 
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.help { 

background-color : #F1EFE6; 
border: lpx solid #D3CDAE; 
font-size: 0.9em; 
padding: lOpx; 
position: relative; 
width: 3Q0px; 

} 


Preencha o campo com unn e-mail valido, 
as sim poderomos enl rar em coniato com voc& 
para inform ar o rasliladc do nosso concurso. 


Figura 4.11: O estilo da caixa de ajuda. 


Considerando que este elemento esta ao lado de um campo de e-mail, podemos 
simular uma seta na lateral da caixa de ajuda apontando para o campo do formulario, 
demonstrando a rela^ao entre a mensagem e o campo que o usuario ira preencher. 
Utilizar o : : before para criar esta seta e uma otima op^ao. 

.help::before { 

border-color: transparent #D3CDAE transparent transparent; 

border-style: solid; 

border-width: 14px; 

content: "" ; 

left: -28px; 

margin-top: -14px; 

position: absolute; 

top: 50“/,; 

} 


Preencha o campo com um e-mail vhmo, 
assim poderamos antrar am contain com vocS 
para informar 0 resufcadc do ncsso concurso. 


Figura 4.12: A seta lateral da caixa da mensagem de ajuda. 
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Utilizamos a mesma logica das bordas da faixa que criamos anteriormente para 
transformar este elemento em urn triangulo, e definimos a posi^ao exata dele com 
a combinaqao da propriedade position e das coordenadas com top e left. Mas 
parte do truque e a propriedade top com 50 */, e a margin-top negativa, o que fort^a 
o elemento a ficar sempre centralizado, independente da altura do paragrafo. 

4.6 Criando conteudo atraves de CSS 

Alem de serem bastante uteis para desenhar novos elementos na pagina, estes pseudo 
elementos tambem podem gerar conteudo para complementar seus elementos de 
referenda. A propriedade content aceita peda^os de texto para preencher o seu 
conteudo - mas voce nao pode adicionar codigo HTML, infelizmente. 

Talvez o exemplo mais classico dessa funcionalidade e o de exibir o endereqo de 
links da pagina logo apos o seu texto - uma otima pedida para estilos de impressao, 
que veremos logo mais neste capitulo. Mas tambem podemos adicionar icones e ou- 
tros tipos de elementos decorativos para complementar o nosso conteudo. Exemplo, 
em um texto informativo nao tao relacionado, conseguimos adicionar a indica^ao 
de uma mao apontando para o texto, assim: 

<p class='tip’>Voce sabia que...</p> 

Para posicionar uma indicaqao proxima ao texto, basta o uso do : : before junto 
de um simbolo Unicode que representa uma mao apontando o dedo. 

.tip::before { 
content: M \261E M ; 
margin-right : lOpx; 

> 


** Voce sabia que... 


Figura 4.13: Adicionamos o simbolo Unicode atraves da propriedade content’. 


Pronto - nao precisamos de uma imagem de um icone especifico para isso. 
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Outro caso de uso para gerar conteudo com pseudo elementos e ao adicionar 
estilo a elementos de cita<~ao, como o blockquote. E bastante simples adicionar as- 
pas em torno do texto para indicar que aquele conteudo se trata de uma cita^ao. 
Come^ando com o mmimo necessario de HTML: 

<blockquote> 

0 problema com citagoes na Internet e que voce nao pode 
confirmar a sua veracidade. 

</blockquote> 

E um pouco de CSS para formatar a cita^ao: 

blockquote { 
color: #444; 
font-style: italic; 

} 


Oprobierm comcitagoes na Internet e que vocG nao pode confirmar a sua veracidade. 


Figura 4.14: Um bloco de citacao levemente formatado. 


Podemos adicionar aspas ao redor do texto, com uma fonte maior e uma cor dife~ 

rente, apenas adicionando o conteudo necessario no : : before e :: after e ajustando 

o seu estilo como necessario. 

blockquote ::before, blockquote:: after { 
color: #000; 
font-size: 3em; 

> 

blockquote:: before { 
content: "\201C M ; 

} 

blockquote:: after { 
content: "\201D"; 

> 
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({ 19 

O probJema com citagoesna internet 6 que voce nao pode confrrmara sua veracidade. 


Figura 4.15: As aspas adicionais via pseudo elementos. 


Como o : : be fore e o :: after herdam as propriedades do seu elemento, precis 
samos sobrescrever a cor do texto e definir um tamanho de fonte (tres vezes) maior. 


Um ponto chave para posicionar pseudo elementos 

Como voce pode ter notado em alguns dos nossos exemplos, as proprieda¬ 
des position, top e left sao bastante importantes para garantir que nossos 
pseudo elementos estejam em seus lugares exatos. Nao deixe de conferir a 
se^aolcq] onde iremos conferir em detalhes o uso destas propriedades. 


4.7 Arquitete o seu CSS para o futuro 

Escrever CSS pode ser facil, mas escrever CSS bem escrito e uma habilidade relativa- 
mente rara e preciosa. Conforme os seus projetos vao ganhando novas funcionalida- 
des e sofrendo mudan^as visuais, voce pode se encontrar em situates onde alterar 
os estilos de um elemento ou adicionar uma varia^ao de algo existente pode ser uma 
tarefa herculana, e a duplica^ao de codigo so traz mais complicates e problemas 
para a sua equipe e o seu projeto. Por isso, e importante refletir sobre o codigo CSS 
escrito e tratar a sua manuten^ao com a mesma atenqao que se cuida do codigo da 
sua aplica^ao, independente da linguagem que voce utilize. 

Escolha bem seus seletores 

Um dos viloes classicos de um CSS mal cuidado e a complexidade de seletores 
usados. Alem da degrada^ao da performance das suas paginas, compreender o es- 
copo de uma seletor para alterar alguma propriedade pode ser complicado. 

Para entender o impacto de performance e necessario entender como os navega- 
dores processam os seletores que escrevemos. Considere o seguinte seletor: ul#nav 
li a. 
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O navegador come^ara a ler o seletor de tras para frente - ao contrario do que 
nos estamos acostumados a ler, o que surpreende diversos desenvolvedores - e ira 
procurar na pagina todos os elementos da tag a. Apos isso, ele ira filtrar esta lista 
por todos que estejam contidos em um elemento li, e entao por todos que tambem 
estejam dentro de um elemento com id nav. E por lim, todos em que o elemento 
com o id nav seja da tag ul. 

Considerando que o HTML para uma estrutura dessas seria uma lista nao or- 
denada apenas com links, algo como #nav a seria uma solu^ao mais simples para o 
navegador processar, e com o mesmo efeito. Ou ate mesmo utilizando uma classe 
nav-link, por exemplo, diretamente nos elemento a dentro da lista com o id nav. 

Outro ponto que gera muita discussao e confusao entre desenvolvedores: utilizar 
ids ou classes? Enquanto ids podem ser mais rapidos para o navegador procurar 
os elementos necessarios na arvore do DOM, a diferen^a de performance e infima, 
entao a discussao acaba mais no assunto de preferencia pessoal. Classes sao otimas 
para compor diversos aspectos compartilhados entre varios elementos, e ids ajudam 
a indicar que o seletor e espedfico para um elemento unico da pagina. 

Uma regra pessoal que eu tento seguir e evitar seletores com mais de 3 partes, 
como header . nav a. Caso voce se encontre escrevendo seletores maiores que algo 
assim, pare e reveja a sua estrutura para que nao seja necessario escrever seletores 
tao grandes - seja utilizando mais classes ou reduzindo a especificidade dos seus 
seletores. 

Compondo padroes visuals atraves de classes 

Nicole Sullivan popularizou uma abordagem na escrita de CSS e composi^ao de 
estilos, similar a Orienta^ao a Objetos, que e utilizada em linguagens de programa- 
$ao. O OOCSS - Object Oriented CSS - propoe a separaqao da estrutura dos estilos 
e os containers de seu conteudo. 

O objetivo e escrever um codigo mais fragmentado e reutilizavel, onde diver- 
sas classes diferentes sao utilizadas para compor o comportamento final de um ele¬ 
mento, independente da tag que ele possua ou o contexto que ele se encontre - dentro 
de uma lista, um formulario ou o cabe^alho da pagina. 

Tome como exemplo os 2 botoes a seguir. 
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Enviar mensagem I Canceiar 


Figura 4.16: Como voce estruturaria o CSS para estes elementos. 


Podemos separar os aspectos destes elementos era 4 classes diferentes: uma para 
delinir os estilos basicos de urn botao, uma para as cores do botao principal, e outras 
duas para controlar os tamanhos de cada urn, assim: 

<a href="#" class= 'button primary-button big-button' >Enviar mensagem</a> 
<a href ="#" class= 'button small-button 1 >Cancelar</a> 

.button { 

background-color : #999999; 
color: white; 
display: inline-block; 
font-weight: bold; 
padding: 0.5em lem; 
text-decoration: none; 

> 

.primary-button 1 
background-color : #389739; 

} 

.big-button { 
font-size: l.lem; 

> 

.small-button { 
font-size: 0.9em; 

> 


Desta forma, botoes era outras paginas e que possuam detalhes diferentes (como 
uma cor de fundo diferente, ou um icone posicionado ao lado do texto) podem com- 
partilhar os estilos basicos de um botao e aplicar os seus pontos espedficos com ou¬ 
tras classes, como danger-button ou icon-button. Esta abordagem pode ser esten- 
dida para menus de navega^ao ou conteudos relacionados, ou uma relayso de posts 
- o famoso media object dos exemplos tradicionais de OOCSS. |7f 
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4.8 Gere relatorios inteligentes e simples com os 

ESTILOS DE IMPRESSAO 

Os navegadores nos permitem adicionar estilos espedficos para quando uma pagina 
for impressa pelo usuario. Isto pode ser feito de duas maneiras: Com o atributo 
media na tag link ou criando um bloco de CSS dentro da diretiva ©media print, 
conforme os exemplos a seguir. 

©media print { 

/* Este CSS so sera aplicado qnando a pagina for impressa */ 

> 

<!-- 0 atributo "media" indica qne estes estilos 
so devem ser aplicado para impressoes --> 

<link href- M print .css" media- "print "> 

A primeira forma e a mais adequada, ja que evitamos uma nova requisicao ao 
arquivo de impressao. E como os estilos de impressao costumam ser pequenos, nao 
existem problemas em adicionar este CSS ao final do estilo padrao da sua pagina, 
Pode-se considerar que a impressao de paginas e algo do passado, mas depen- 
dendo do tipo de conteiido que voce trabalha, e o seu publico, isto pode ser bastante 
importante para o seu projeto. 

Por exemplo, ao utilizar o Airbnb (http://airbnb.com) para alugar um aparta- 
mento para uma viagem aos Estados Unidos, e interessante imprimir o itinerario 
da viagem, que possui endere^os, datas e telefones uteis caso voce tenha algum pro- 
blema ao pousar no seu destino, onde voce provavelmente nao tera uma conexao de 
internet disponivel logo ao chegar. Ou ao criar um trajeto pela cidade no Google 
Maps, voce pode imprimir o mapa com o seu roteiro para ter em maos ao dirigir. 

Alem disso a impressao das paginas nao fica resumida a ter o conteudo em uma 
folha de papel, ja que hoje em dia e bastante simples de se exportar uma pagina 
da web para um arquivo . pdf utilizando o processo de impressao dos navegadores. 
Voce consegue compartilhar paginas e e-mails ou arquivar paginas de recibos de 
compras ou pagamentos de services pela internet. 

Independente do tipo de conteudo que voce estiver trabalhando, existem prati- 
cas recomendadas para tratar os estilos de impressao, visando a legibilidade do seu 
conteudo e tirando elementos desnecessarios da frente de coisas mais importantes. 
Vamos repassar alguns deles. 


52 



Casa do Codigo 


Capitulo 4. O que tod a desenvolvedor precisa saber sobre CSS 


Nao conte com cores 

Nao podemos depender da qualidade e da gama de cores disponiveis ao imprimir 
a pagina, pois nao temos controle ou informaqoes sobre a qualidade do hardware ou 
da disponibilidade de tinta, entao o recomendado e se manter no branco e preto de 
praxe. Entao podemos remover todo tipo de cor ou imagem de fundo, e for^ar a cor 
do nosso para texto, assim: 

@media print { 

* { 

background: transparent !important; 
color: #000 .'important ; 

> 

> 


O uso do ! important e para garantir que esta regra sobrescreva qualquer outro 
seletor mais espedfico do seu CSS padrao, para garantir que tudo se mantenha na 
cor preta. Alem disso } e recomendado remover qualquer outra propriedade de estilo 
visual, como box-shadow e text-shadow, alem de revisar a cor das bordas utilizadas. 

@media print { 

* { 

background: transparent !important; 
border-color: #000 '.important; 
box-shadow: none '.important; 
color: #000 .'important ; 
text-shadow: none !important ; 

} 

> 


Ao remover a propriedade background completamente, tambem estamos remo- 
vendo imagens de fundo. Caso alguma destas imagens devesse estar presente na sua 
versao de impressao, considere move-la para uma tag img. E o contrario tambem 
- navegaqoes criadas com imagens deveriam ser trocadas por texto simples ao ser 
impresso. 


53 



4-8, Gere relatorios inteligentes e simples com os estilus de impressao 


Casa do Codigo 


lost.fm Music Radio Events Charts Co mm unity Originals 


Last.fm/discover: find your next favourite band 


@ English 


Figura 4.17: O cabe^alho do Last.fm, que utiliza diversas imagens para compor o logo 
e o menu principal. 


Musk ftadio iventt Charts Community Originals 

Last.fm/discover find your next favourite band » English | 


Figura 4.18: O cabe^alho impresso, sem o logo e com as imagens do menu no lugar 
de um texto comum. 


Links devem ser links 

Com a ausencia de cores, todos os seus links azuis, verdes ou vermelhos terao 
a mesma cor preta do seu conteudo. Uma forma de diferenciar os links do texto 
comum e sublinhando-os, caso voce tenha retirado isto do estilo dos seus links. 

a { 

text-decoration: underline /important ; 

} 


Outra tecnica recomendada para tratar links em casos de impressao e exibir o 
caminho que eles possuem logo apos o seu texto. Isto e possivel utilizando o pseudo 
elemento :: after dos links, junto da fun^ao attr(), que permite ler os atributos de 
um elemento atraves de CSS. 

a[href] ::after { 

content: " (" attr(href) 

} 

Desta forma, todos os links com um href presente terao o seu caminho exibido 
entre parenteses ao seu lado. Links que nao possuem uma url a seguir, como links 
que utilizam fun^oes de JavaScript nao devem receber este efeito, entao precisamos 
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remover o pseudo elemento nestes casos, utilizando um seletor mais especifico que 
o anterior: 

a[href]:: after { 

content: *' (" attr(href) 

> 

a[href''= 11 javascript after, a [href:: after { 
content : " 11 ; 

> 


Controlando quebras de paginas 

Enquanto no navegador o nosso conteudo existe em apenas uma pagina, na im- 
pressao existe a necessidade de se quebrar o conteudo em paginas de acordo com 
a configura^ao do usuario. Por padrao isto sera feito de acordo com o tamanho 
da sua pagina, mas e possivel tomar controle sobre isto e definir regras especificas 
para informar em qual parte do seu conteudo a quebra de pagina sera feita. Atu- 
almente, existem 3 propriedades disponiveis na maioria dos navegadores para isso: 
page-break-before, page-break-inside epage-break-after. 

O page-break-before e page-break-after definem se a quebra de pagina deve 
ocorrer antes ou depois do elemento. A propriedade aceita os valores always, utili- 
zado para fonpar a quebra, ou avoid, indicando para o navegador que a quebra deve 
ser evitada. Com eles e possivel, por exemplo, ao imprimir uma rela^ao de posts de 
um blog, deve existir uma quebra de pagina entre um post e outro. 

article { 

page -break-after: always; 

> 


Ou caso voce precise de um controle mais refinado das quebras, voce pode de¬ 
finir um elemento vazio para posicionar as quebras em pontos especificos do seu 
conteudo. 

.page-break { 
display: none; 

> 


@media print { 
.page-break { 
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display: block; 

page -break-before: always; 

> 

} 


E entao adicionar uma tag div, por exemplo, com a classe .page-break onde for 
necessario for^ar a quebra de pagina. 

Ja com o page-break-inside, que aceita apenas as opcodes auto e avoid, po- 
demos definir que o conteudo de um paragrafo nao deve ser quebrado entre duas 
paginas. 

P < 

page-break-inside: avoid; 

} 


Este tipo de controle e interessante para blocos de conteudo extensos, como ma¬ 
nuals, documenta^oes ou mesmo e-books criados em HTML. Alem destas 3 propri- 
edades existem outras duas, utilizadas para definir os limites de Jinhas que deve ficar 
em uma pagina ou em outra: orphans e widows. Mas infelizmente estas propriedades 
nao possuem um suporte extenso pelos navegadores. 

Impressao de tabelas 

Vamos praticar um pouco e melhorar uma tabela de um relatorio financeiro com 
debitos e lucros obtidos. Alem dos valores, a tabela possui alguns links para navegar 
entre os dados e tomar outras a^oes no sistema. O HTML e bem simples, tendo 
apenas uma tabela e algumas linhas. 

<hl>Transagoes de Maio, 2011</hl> 

<table> 

<tr> 

<td> 

<a href='http: //exemplo/transacao/1 1 >Transagao l</a> 

</td> 

<td class=' expense 1 >R$ 100,00</td> 

<td class=' actions 1 > 

<a href="http: //exemplo/transacao/l/editar’'>Editar</a> 

</td> 

</tr> 

<tr> 
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<td> 

<a href ='http://exemplo/transacao/2'>Transagao 2</a> 

</td> 

<td class= 'profit 1 >R$ 200,00</td> 

<td class= 'actions 1 > 

<a href= "http://exemplo/transacao/2/editar">Editar</a> 

</td> 

</tr> 

</table> 

E um pouco de CSS para melhorar o estilo da tabela, definindo sua largura, cores 
para as bordas das celulas, alinhamentos e tambem a definigao de links: 

table { 

width: 500px; 

> 

td { 

border: lpx dotted #666; 
padding: 5px; 

> 

td a { 

color: #3B5998; 

> 

.expense, .profit, .actions { 
text-align: right; 

> 

.expense, .profit { 
font-weight: bold; 

> 

.expense { color: red; } 

.profit { color: green; } 

.actions a { 

font-size: 0.9em; 
color: white; 
padding: 2px 5px; 
background-color : #3B5998; 
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text-decoration: none; 

> 


Transacoes de Maio, 2011 


Tmnsapao 1 

Transapao 2 


R$ 100,00 
R$ 200,00 


Editor 

Editor 


Figura 4.19: A tabela do relatorio financeiro, em sua versao padrao. 


Alem de definir uma largura para a tabela e definir algumas regras de alinha- 
mento, registros de lucro ficarao com a cor verde e gastos serao exibidos em verme- 
lho. Ao imprimir esta pagina em preto e branco nao possuimos nenhuma distin^ao 
visual disso e os links nao estarao disponiveis no papel. Vamos escrever algumas 
regras de CSS para impressao e ajustar isto. 

Primeiro, vamos garantir que todo o conteudo esteja na cor preta, e que a tabela 
ocupe o maximo de espa^o possivel. 

Smedia print { 

* { 

color: #000 /important ; 

} 

table { 

width: 100%; 

} 

td { 

border-color: #000; 

> 

} 


Tambem podemos trabalhar um pouco nos links existentes na pagina. Os da 
primeira coluna podem ser expandidos utilizando a tecnica do pseudo elemento. Ja 
a coluna com os links de edi^ao e dispensavel para a nossa visao de impressao, por 
ser um elemento de navega^ao sem nenhum conteudo relevante para este cenario, 
podemos entao esconder esta coluna inteira. 
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a: :after { 

content: n ( M attr 
margin-left: 2px; 

> 


( M attr (href) ,r >"; 


.actions { 


display: none; 

> 


Por fim, temos a coluna de receitas e debitos a tratar. Indo na onda de pseudo 
elementos, podemos adicionar duas caractensticas a casa celula desta coluna. Um 
sinal de - ou +, dependendo do caso, antes do valor, e os termos Receita e Despesa. 

Com o uso do vermelho e do verde removido nos estilos de impressao, estas 
indicates serao uteis para identificar o tipo de transapao de cada linha. O CSS para 
adicionar este conteudo e o seguinte: 

.expense::before { 
content: 11 ; 


} 


.expense::after { 


content : " 


- Despesa 1 '; 


> 


.profit::before { 


content: f '+ 11 ; 

> 


.profit::after { 


content : " 


- Receita"; 


> 


Transapoes de Maio, 2011 



Transapao 2 (http^Kampl^ransacao/2) 



Figura 4.20: A versao de impressao finalizada. 
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Assim e possivel adequar diversos aspectos do visual das nossas paginas para o 
modo de impressao, de acordo com as necessidades dos seus usuarios e os objetivos 
do tipo de projeto que voce estiver fazendo. Claro que este tipo de tratamento nao e 
necessario em todos os projetos, mas e uma carta valiosa na sua manga. 
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Diversas adi^oes do CSS 3 sao extremamente liteis para substituir varios tipos de 
imagens que utilizavamos para adicionar cores e formas aos elementos HTML, o 
que nao conseguiamos atingir com apenas CSS. Alem da redu^ao de arquivos para se 
trabalhar e a ausencia de dependences externas que impactam na performance dos 
sites, a flexibilidade dessas propriedades permite diversas combina^oes diferentes, 
que geram muitos estilos que voce nao imaginaria ser tao simples de se criar com 
apenas CSS. 

O poder de propriedades como box-shadow e fun^oes como o linear-gradient 
e tao grande que e comum encontrar designers e desenvolvedores - eu fa^o parte 
deste grupo - que aposentaram os editores de imagens e criam as formas, cores e 
efeitos das paginas direto no codigo, conferindo os resultados ao vivo em seus nave- 
gadores. 



S-i. A regra ^font-face 
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5.1 A REGRA @FONT-FACE 

Uma das funcionalidades que adiciona muita flexibilidade ao dar vida aos designs 
das nossas paginas e a regra @font-face. Ela permite detinir novas famllias de fontes 
que as nossas paginas utilizam, e informa ao navegador e ao sistema operacionai 
do usuario onde o arquivo necessario para desenhar os tra^os da sua fonte estao 
localizados. A defini^ao de uma nova fonte e a seguinte: 

@font-face { 

font-family: "Lobster 11 ; 
font-style: normal; 
font-weight: 400; 

src: local ( 'Lobster 1 ), urlC/fonts/lobster .woff) format { 1 woff 1 ); 

} 

Utilizando as mesmas propriedades usadas para alterar os estilos de fonte de 
um elemento, podemos definir os detalhes da nova fonte. No caso de definir fontes 
com italico ou negrito, precisamos informar os valores corretos para as propriedades 
font-style e font-weight de acordo com o uso. Ja a propriedade src e responsavel 
por definir a localiza^ao da fonte: a fun^ao local informa um possivel nome para 
a fonte que sera pesquisado na maquina do usuario, ou uma URL externa para que 
a fonte seja baixada como um recurso adicional, igual a uma imagem de fundo, por 
exemplo. 

Com a fonte definida, podemos utiliza-Ia normalmente: 
hi { 

font-family: "Lobster", cursive; 

> 

Caso a nossa fonte Lobster nao esteja disponivel, por um problema de rede ou a 
falta de um arquivo compativel, uma fonte alternativa como cursive deve ser defi¬ 
nida para ser aplicada ao elemento. A compatibilidade de formatos diferentes e um 
ponto irritante: existem diversos formatos de fontes diferentes que voce pode pre- 
cisar dependendo dos navegadores que voce pretende atender: . eot para algumas 
versoes do Internet Explorer e .svg, .ttf ou novamente o .eot para o navegador 
nativo do Android, ou versoes desatualizadas do Safari, tanto em desktops como no 
iOS. O formato tornado como padrao, suportado por todos os navegadores moder- 
nos, e o woff. 
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Trabathande com @fonte-face 

TraSafdando com @fonte-face 

Figura 5.1: As diferen^as da ’Lobster para o ’cursive’ uma alternativa aceitavel caso a 
tonte nao esteja disponivel. 


5.2 Como utilizar servi^os de distribui^ao de pon¬ 
tes 

Existem alguns services disponiveis na Internet que facilitam o uso de fontes adi- 
cionais, disponibilizando o codigo necessario, servindo os arquivos de fonte e tra- 
tando de assuntos relacionados a licen^as de uso, por exemplo. Os mais famo- 
sos neste campo sao o Typekit (https://typekit.com) e o Google Web Fonts {http: 
//www.google.com/webfonts). 

Alguns sites alternatives disponibilizam o download dos arquivos necessarios 
e um exemplo de uso das fontes em CSS, mas sem servir os arquivos direta- 
mente dos seus servidores, deixando esta responsabilidade a nos desenvolvedo- 
res, como o FontSpring (http://www.fontspring.com/) e Font Squirrel {http://www. 
fontsquirrel.com/). 

Podemos utilizar o service de fontes do Google, o Google Web Fonts, para pra- 
ticar um pouco. Comece com o seguinte HTML. 

<hl>HTML & CSS</hl> 

Agora, vamos carregar a fonte Press Start 2P {http://www.google.com/ 
webfonts/specimen/Press+Start+2P), para adicionar um visual nostalgico de 8 bits 
ao titulo. Adicione a seguinte linha de HTML ao head da sua pagina, 

<link href= 'http://fonts.googleapis.com/css?faInily=Press+Start+2P , 
rel= 'stylesheet' > 

Se voce acessar o enderec~o desta folha de estilo, http://fonts.googleapis.com/css? 
family^ Pres s+Start+2 P , vera que ela nao faz nada alem de definir a fonte Press Start 
2P, referenciando um arquivo .woff presente nos servidores do Google. Podemos 
entao utilizar esta fonte no hi que criamos. 
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hi { 

font-family: Tress Start 2P’, cursive; 

> 


HTML & CSS 


Figura 5,2: A fonte ’Press Start 2P’ em uso. 


5.3 SUBSTITUI^AO DE ICONES POR FONTES 

Outro uso bastante interessante para fontes e substituicao de pacotes de icones. No 
lugar de uma pilha de imagens, voce pode utilizar uma fonte composta de icones, 
e nao caracteres normais, e ganhar o poder de controlar o tamanho e cor do seus 
icones sem precisar editar imagens e exportar novos arquivos para dentro de seus 
projetos. 

Existem diversas fontes e ferramentas existentes para ajudar a compor gru- 
pos de icones e adicionar eles as suas paginas sem muito trabalho. Algu- 
mas das cole96cs de icones mais interessantes por ai: Pictos (http://pictos.cc/). 
Font Awesome {http://fortawesome.github.com/Font-Awesome/} e Iconic (http:// 
somerandomdude.com/work/iconic/}. E para compor ou pesquisar outras op^oes, 
existem op^oes como Fontello (http://fontello.com/), IcoMoon (http://keyamoon. 
com/icomoon/#toHome) e o Shifticons (https://www.shifticons.com/). 

Pegue a fonte Iconic, por exemplo, para testar um pouco. Voce pode baixar o 
pacote direto do site do seu criador, P.J. Onori, em http://somerandonidude.com/ 
work/iconic/, ou pegar a ultima versa© da fonte no seu repositorio no GitHub - https: 
//github.com/somerandomdude/Iconic 

Em vez de utilizar o CSS que o projeto ja disponibiliza para voce, vamos escrever 
um exemplo do zero para ver o uso da fonte, Come^ando com a definii^ao da fonte 
no CSS. 

@font-face { 

font-family: ■IconicFill' ; 

src: url( 'iconic_fill.woff' ) format ( 1 woff 1 ); 
font-weight: normal; 
font-style: normal; 

> 
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Entao, adicionamos um elemento e uma classe para deiinir qual leone sera exi- 
bido junto do nosso titulo. Uma otima forma de exibir tais leones de fontes e utili- 
zando a propriedade content dos pseudo elementos: 

<hl class= 1 icon-next 1 >Avangar</hl> 

.icon-next::after { 
content: '\ 2192 1 ; 
font-family: 1 IconicFill’ ; 
margin-left: lOpx; 

> 


Avangar 4 


Figura 5.3: O leone criado utilizando a fonte ’Iconic’ 


Utilizando um pseudo elemento e um slmbolo Unicode, o leone de uma flecha 
para a direita e exibido ao lado do titulo. Qualquer mudan^a dos estilos do texto do 
elemento ou do seu pseudo elemento ira afetar o leone, adequando cores e tamanhos. 
Podemos trocar a cor de todos os leones associados a um hi e ate utilizar o leone em 
outro elemento, como um p, adicionando o seguinte codigo: 

<p class® 1 icon-next *>Ir para a proxima pagina</p> 

hi. icon-next { 
color: blue; 

> 


Avangar 

lr para a proxima pagsna 4 


Figura 5.4: Os leones refletem o estilo do elemento que os contem. 
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Desta forma conseguimos posicionar e estilizar todos os icones disponiveis no 
Iconic facilmente com CSS. Outro exemplo sao os classicos icones para a<p>es feitas 
com sucesso ou erros de validates de formularios. 

.icon-ok ■{ 
color: #489000; 

} 

. icon-ok::before { 
content: "\2714 rt ; 
font-family: 1 IconicFill' ; 
margin-right: lOpx; 

> 

.icon-invalid { 
color: #990000; 

} 

.icon-invalid::before { 
content: "\2718 M ; 
font-family: 'IconicFill' ; 
margin-right: lOpx; 

> 

<p class= 'icon-ok 1 >E-mail enviado com sucesso !</p> 

<p class= 'icon-invalid' >Atengao, preencha todos os campos do 
formulario 
</p> 


0 E-maii envcado com sucesso! 

© Atenpao, preencha todos os campos do formulario 


Figura 5.5: Combinando icones e cores para criar mensagens. 


Enquanto o Iconic utiliza simbolos Unicode como caracteres para os seus ico¬ 
nes, outras fontes podem utilizar outros caracteres para isto. E necessario conferir a 
documenta^ao - caso exista uma - a respeito de cada fonte antes de utiliza-la. 
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5.4 Explore novas possibilidades com bordas 

Todo elemento HTML e comparado a uma caixa, mas nem todos os eJementos das 
nossas interfaces precisam ser quadrados. Em vez de se utilizar imagens a torto e di- 
reito, podemos utilizar o border-radius para arredondar os cantos dos seus elemen- 
tos. A propriedade aceita ate 4 valores, seguindo o modelo de outros como margin 
e padding, sendo a unica diferenca que o primeiro valor e referente ao canto su¬ 
perior esquerdo do elemento, seguindo em diante no sentido horario. Enquanto 
alguns cantos arredondados podem parecer apenas um pequeno detalhe estetico, o 
border-radius consegue criar mais do que isso. Veja a seguir. 

<h3 class- 'tnt' >TNT</h3> 

. tnt { 

border-radius: 50 4 / ( ; 
border: 5px solid #000; 
height: 50px; 
line-height: 50px; 
text-align: center; 
width: 50px; 

> 



Figura 5.6: Utilizando border-radius para criar circulos 


Podemos utilizar porcentagens e criar circulos ou elipses, independente do ta- 
manho real do elemento. Fora isto, cada canto do elemento pode receber dois valores 
para definir exatamente qual sera o raio utilizado para criar o efeito, 

<span class=' counter 1 >37</span> 

.counter { 

background-color : #000; 
border-top-left-radius : 25px lOpx; 
border-top-right -radius: 25px lOpx; 
color: white; 
display: block; 
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font-size: 1.7em; 
height : 50px; 
line-height: 50px; 
text-align: center; 
width: 50px; 

} 



Figura 57: Um exemplo de uso mais refinado do border-radius. 


Este e um caso de uso mais raro de se encontrar, visto que a maioria das aplica- 
<;oes de border-radins sao perfeitamente circulates, e geralmente feitos para realgar 
detalhes de certos elementos, como botoes, caixas de texto ou caixas de mensagens. 

Criando nuvens 

Nao, nao vamos falar sobre Cloud Computing neste livro. Mas vamos desenhar 
um leone de uma nuvem utilizando pseudo elementos e o border-radius, para de- 
monstrar como e posslvel criar leones e outras formas que geralmente se utiliza como 
imagens no seu codigo. No nosso HTML sera bastante simples, sem nenhum con- 
teudo. 

<div> 

<span class= 'cloud' ></span> 

</div> 

Primeiro, com o span iremos desenhar a base da nuvem, e a div servira como 
um fundo do nosso leone. 

div { 

background-color : #000; 
width: 50px; 
height: lOpx; 
padding: 20px 50px; 

} 
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•cloud { 

background-color : #FFF; 
border-radius: 48px; 
display: inline-block; 
height: 16px; 
position: relative; 
width: 48px; 

> 



Figura 5 . 8 : A base da nuvem, criada com border-radius. 


O ponto chave destes valores e o border-radius de 48px, que e 3 vezes o valor 
da altura dele - 16px. Caso fosse necessario uma nuvem maior, so iriamos manter 
esta propor^ao de valores ao definir liovos tamanhos. Vamos ao proximo peda^o: 

.cloud::before { 
background-color : red; 
border-radius: 507,; 
content : ' ' ; 
height: 14px; 
position: absolute; 
right: 7px; 
top: - 6 px; 
width: 14px; 

> 



Figura 5 . 9 : O pseudo elemento posicionado acima da base. 


Utilizando o :: before, desenhamos uma esfera de 14px posicionada de certa 
forma a deixar metade do elemento para fora da base. O fundo vermelho servira 
apenas para ajudar a distinguir cada um dos 3 elementos entre si. Precisamos agora 
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de outro drculo, um pouco maior, posicionado ao lado direito do span. Podemos 
reaproveitar as defini^oes de posi^ao e tamanho do :: before e sobrescrever apenas 
alguns valores para criar outro elemento maior. 

.cloud::before, .cloud::after { 
background-color : red; 
border-radius: 507,; 
content : ' 1 ; 
height: 14px; 
position: absolute; 
right: 7px; 
top: -6px; 
width: 14px; 

> 

.cloud::after { 
background-color : blue; 
height : 23px; 
left: 7px; 
right: auto; 
top: -lOpx; 
width: 23px; 

> 



Figura 5 . 10 : Mais uma parte da nuvem, posicionada no outro lado da base. 


Agora o :: after, utilizando da mesma tecnica para se desenhar circulos, ocupa 
o lado direito da nuvem. Agora basta alterar os pseudo elementos para que ambos 
fiquem com a mesma cor de fundo do span - #FFF% - e ver o resultado final do 
experimento. 
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Figura 5.11: Trocando os fundos para branco conseguimos ver a forma completa da 
nuvem. 


Um caso classico de uso para border-radius e na cria^ao de estilos para com- 
ponentes de formularios: de caixas de texto a botoes. Esta aplica^ao merece uma 
aprofundamento maior, que voce encontra na se<;ao|7,9|deste livro. 


5.5 Manipula^ao de cores com rgba e gradientes 

Alem de fontes e bordas, outro artificio visual ganhou muito com a chegada do CSS 
3 - as cores. Antigamente limitadas a apenas textos e fundos, o que sempre resultava 
na mesma situa^ao das bordas arredondadas - uso de imagens para criar gradientes e 
opacidades, o que impacta na performance e na flexibilidade de manuten^ao do seu 
codigo. Fun^oes muito uteis sugiram para suprir diversos casos de uso de imagens, 
como o rgba e o linear-gradient. 

Primeiro, ao rgba. A fun^ao permite definir a opacidade de uma cor, permitindo 
criar efeitos de transparencias utilizando apenas a cor de fundo ou as bordas de um 
elemento. Um ponto crucial e que a fun^ao nao recebe um valor hexadecimal, como 
#000000, e sim utilizando os 3 decimals que representam a cor, no caso do preto sao 
0,0,0. O quarto argumento da fun^ao e a opacidade deseja, de 0.0 a 1.0. 

Vamos a a^ao. Com o HTML a seguir, nos temos uma foto e uma legenda, uti¬ 
lizando novas tags como o figure e o figcaption para agrupar o img com a sua 
legenda. 

<figure> 

<img src~"/iniages/sf. jpg’ f alt="A Golden Gate."> 

<figcaption> 

San Francisco, California 
<small> 

Por Salim Virji (http://www.flickr.com/photos/salim/402618628/) 
</small> 

</figcaption> 

</figure> 
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Nosso primeiro passo com o CSS sera posicionar a mensagem por cima da foto, 
alguns pixels de distancia do final dela. 

figure { 

position: relative; 

} 

img { 

display: block; 

> 

figcaption { 
bottom: 5px; 
margin: 0 5px; 
padding: 5px; 
position: absolute; 
width: 300px; 

> 



Figura 5.12: Posicionamos a legenda sobre a foto, mas nao e facil ler o que esta escrito. 


Desta forma nao temos contraste nenhum para ler o texto da legenda. Hora de 
aplicar um fundo preto e trocar a fonte da legenda para branco, melhorando sua 
leitura. 

figcaption { 

background-color : #000; 
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background-color : rgba(0,0,0,0.5); 
color: #FFF; 



San Francisco, California Per saiim virji 

(http^ww,flickr.oonn45bot!osJballnfiM03etae380 


Figura 5.13: Nao ficou meihor para ler a legenda da foto? 


Com o 0 .5 de opacidade do fundo preto conseguimos ler a legenda normalmente 
e ao mesmo tempo identilicar as partes da foto que ficaram por tras dela. Caso o 
navegador utilizado nao tenha suporte a rgba, sera usado a definicao de um fundo 
preto solido, utilizando a classica definicao da cor em hexadecimal. 

Combine transparencia e bordas 

Uma outra aplica^ao interessante para o rgba e poder combinar tons de preto e 
branco para escurecer ou clarear outras cores, como criando divisorias entre se^oes 
ou elementos de um menu. A praticidade desta abordagem e nao se preocupar com 
a cor de fundo por tras da borda ou fundo com transparencia, permitindo utilizar o 
mesmo CSS em contextos e lugares diferentes. Talvez uma forma meihor de entender 
isto e colocando a mao na massa. 

Vamos montar uma lista, e alinhar todos os itens horizontalmente. 

<ul> 

<li>Um</li> 

<li>Dois</li> 

<li>Tres</li> 
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<li>Quatro</li> 

</ul> 

Cada item da lista ocupara 50px, com o seu texto centralizado: 
ul { 

height : 35px; 
list-style:none; 
padding: 0; 
width: 210px; 

} 

li { 

float: left; 
line-height: 35px; 
font-size: 0.9em; 
width: 50px; 
text-align: center; 

} 


Um Dois Tres Quatr-o 


Figura 5.14: Os itens do menu devidamente posicionados. 


Simples, certo? Hora de adicionar cores. Iremos mudar a cor do texto para 
branco e aplicar um fundo cinza na lista. 

ul { 

background-color : #CCC; 
color: white; 

> 


Figura 5.15: O menu com um fundo cinza. 
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Agora que a lista possui uma cor solida de fundo, podemos aplicar as bordas 
com transparency. Iremos aplicar uma borda preta com apenas 30% de opacidade 
na lista, e uma sequencia de bordas brancas e pretas entre os elementos. 

ul { 

border: lpx solid rgba(0,0,0,0,3); 

> 

li { 

border-left: lpx solid rgba(255,255,255, 0.3); 
border-right : lpx solid rgba(0,0,0, 0.3); 

> 

li :first-child { 
border-left: none; 

> 

li :last-child { 
border-right: none; 

> 


Figura 5.16: As bordas com opacidade nos itens do menu. 


Os seletores de :first-child e :last-child sao utilizados para remover a 
borda esquerda do primeiro item da lista e a borda direita do ultimo elemento, evi- 
tando que elas entrem em contato com a borda do ul. E possivel notar que a borda 
preta pode ser considerada como uma versao mais escura do fundo cinza, enquanto 
a borda branca se torna um cinza mais claro, de forma bastante sutil. Se as bordas 
fossem solidas, utilizando #000000 e #FFFFFF, o resultado seria bastante diferente e 
nada interessante. 


Figura 5.17: As bordas com cores solidas - nao e a mesma coisa. 
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Voce pode agora alterar a cor de fundo da lista, utilizando desde cores primarias 
como azul on vermelho ou tons esperifkos de verde ou laranja. O efeito que vimos 
no fundo cinza e replicavel em diversos outros cenarios e fundos. Fa^a alguns testes 
voce mesmo e confira! 


Um 

Dots 

Tr&s 

Guatro 


Um 

Dois 

Tf&S 

Guatro 


Um 

Dois 

TrSs 

Quatro 


Um 

Dote 

TrSa 

Q.atro 


Figura 5.18: Varia^oes do menu trocando apenas a cor de fundo. 


Utilizando o linear-gradient 

Talvez uma das partes do CSS 3 que foi mais esperado por diversos desenvolve- 
dores, o linear-gradient e uma fun^ao capaz de criar imagens com gradientes a 
partir de uma lista de cores e posi^oes. Extremamente util para substituir imagens 
de fundo, os gradientes criados via CSS conseguem se adequar ao tamanho dos seus 
elementos e podem ser compostos de diversas cores em diversas posiloes, o que fa- 
cilita traduzir um gradiente criado em um editor, como o Adobe Photoshop, para o 
seu codigo CSS. 

A sintaxe da fun^ao e bastante direta. Primeiro se informa a dire^ao em que o 
gradiente sera projetado, aceitando palavras chave como top ou left (para gradi¬ 
entes na vertical ou horizontal) ou combina^oes de sentidos vertical e horizontal, 
como top right, para criar gradientes na diagonal. Caso voce precise de mais con- 
trole sobre a dire^ao dos seus gradientes, voce pode informar um valor em graus 
(deg) tambem. 

Alem da dire^ao, e necessario informar pelo menos duas cores, ou os chamados 
color-stops, um par de cor e posi^ao (em px ou porcentagem), indicando em qual 
posi^ao a cor devera terminar ou come^ar. Toda a transi^ao de uma cor para outra 
fica a cargo do navegador. 

Apesar da flexibilidade da funcao, voce nao precisa utilizar muitas op^oes ou 
cores para chegar a gradientes tradicionais, como os utilizados em botoes ou barras 
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de agoes ou titulos. 
div { 

font-weight: bold; 
height: 50px; 
line-height: 25px; 
margin-bottom: lOpx; 
padding: 5px; 
text-align: center; 
width: 220px; 

> 

.blue { 

background-image: linear-gradient (top, #4377FA, #053767); 

> 

.reverse-blue { 

background-image: linear-gradient (top, #0537B7, #4377FA); 

> 

.omg-pink { 

background-image: linear-gradient (top right, #FC0050, #FF79A3); 

> 

.stops { 

background-image: linear-gradient (top, #F5B951 487,, #F2A31C 567,); 

> 

<div class='blue l > 

Um gradiente azul classic©, utilizando 2 tons similares. 

</div> 

<div class- 1 reverse-blue' > 

Uma versao inversa do gradiente azul. 

</div> 

<div class= 1 omg-pink 1 > 

Combinando "top 11 e "right 11 para a diregao. 

</div> 

<div class= 1 stops 1 > 

Utilizando posigoes especificas para as cores. 
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</div> 


Um gradiente azul classico, 
utilizando 2 tons similares. 


Uma versao Inversa do 
gradiente azul. 

Combinando "top" e "right" 
para a dire^ao. 

Utilizando posicdes 
especrficas para as cores. 


Figura 5.19: Os exemplos de ’linear-gradient 1 . 


O caso classico da fun^ao sao os gradientes verticais (geralmente utilizando top 
como dire^ao), partindo de um tom mais claro de uma cor para um tom mais escuro. 

Uma regra simples para nao se dar mal com gradientes e manter os tons de cores 
bastante similares, criando uma leve ilusao de uma superflcie arredondada e sob 
o efeito de alguma fonte de luz. Para isto, tenha em maos alguma ferramenta de 
manipulacao de cores para montar as combinacoes necessarias. Como no exemplo 
anterior, o primeiro gradiente e composto de um tom especifico de azul e uma versao 
mais escura dele mesmo. 

Uma alternativa para garantir que os elementos com gradiente nao liquem sem 
fundo algum em navegadores que nao possuam suporte a fun^ao e fixar a cor de 
fundo do elemento para a cor predominate, desta forma o elemento tera um fundo 
solido caso o gradiente nao seja exibido. 

.blue { 

background-color : #4377FA; /* A cor superior do gradiente como fundo */ 

background-image: linear-gradient (top, #4377FA, #053767); 

> 
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Dm gradiente azul classico, 
utilizando 2 tons similares. 


Urn gradients azul classico, 
utilizando 2 tons similares. 


Figura 5.20: A diferen^a do gradiente e da cor de fundo. (exibida em navegadores 
sem suporte) 


Outra solu^ao seria definir um background-image antes da declara^ao do gra¬ 
diente, contendo o caminho para uma imagem a ser utilizada caso a fun^ao nao seja 
executada. 

Apesar da vantagem de que a imagem so sera acessada pelo navegador neste 
cenario de falha, o esfor^o em manter as imagens junto dos gradientes nao me parece 
uma boa ideia, ainda mais com o aumento de uso de navegadores que suportam estes 
gradientes, estas imagens se tornarao obsoletas logo. 

5.6 Trabalhe com sombras e crie menus elegantes 

A propriedade box-shadow permite adicionar multiplas sombras a elementos das 
suas paginas, Existem dois tipos de sombras que podemos trabalhar com CSS: som¬ 
bras externas e internas. Sombras externas, que sao o comportamento padrao do 
box-shadow, sao exibidas atras do elemento, similar ao efeito que e chamado de drop 
shadow em editores de imagens. As sombras internas, que sao exibidas dentro das 
bordas dos elementos e acima do seu fundo, se compara aos efeitos de inner shadow. 

Para se criar uma sombra voce precisa, primeiro, as coordenadas em que a som- 
bra ficara posicionado. Em seguida voce pode definir dois valores opcionais: a den- 
sidade da sombra (geralmente chamado de blur), e um tamanho adicional para con- 
trair ou expandir o efeito da sombra. Apesar de opcional, sombras sem o seu blur 
nao passam de mais uma borda ao redor do elemento, entao ele sempre esta presente 
nas suas sombras. Apos todos os valores numericos voce deve informar uma cor - 
que pode ser um valor hexadecimal ou uma chamada da fun^ao rgba. 

Os efeitos de sombra sao uteis para realgar a sobreposi^ao de um elemento sobre 
outro, o que cai como uma luva na caixa de ajuda que criamos no capitulo [45] Basta 
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adicionar o uso do box-shadow na classe .help, 
.help { 

box-shadow: 3px 3px 3px #AAA; 

> 


Preencha o campo com urn e-mail v&li-do, 
assim poderomos entrar em contato com vacd 
para informal - o resultado do nosso concur so. 


Figura 5.21: A aplicagao do ’box-shadow 1 na mensagem de ajuda. 


Valores positivos movem a sombra para baixo ou para o lado esquerdo do ele¬ 
mento, enquanto valores negativos tomam o caminho contrario. O angulo da sombra 
e crucial para criar o apelo visual que voce quer, e um uso incorreto dos valores pode 
trazer visuais menos interessantes. 

.help { 

box-shadow: -3px -3px 3px #AAA; 

} 


Preencha o campo com um e-mail validc, 
assim poderemos entrar em contato com voce 
para informar 0 resultado do nosso concur so. 


Figura 5.22: A sombra invertida nao combina com o elemento como a anterior. 


Sombras internas podem ser utilizadas para criar um efeito de profundidade 
dentro de um elemento. Com isto voce pode criar a ilusao de algo “pressionado” 
como um botao de um formulario ou o item de menu que esta selecionado, ou real¬ 
gar a indicagao que um elemento e um campo de texto, por exemplo. 

Faga a sua pesquisa aqui: <input type="text , '> 
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input { 

border: lpx solid #999; 

box-shadow: 2px 2px 2px rgba(0,0,0, 0.25) inset; 
padding: 2px 5px; 

> 


Faqa a sua pesquisa aqui: 


Figura 5.23: A sombra interna da caixa de texto. 


O efeito e bastante sutil, mas e uma op^ao elegante para os estilos dos seus for- 
mularios. 

Outra combina^ao interessante de campos de formularios e box-shadow e criar 
uma sombra posicionada com 0 0, criando um brilho ao seu redor, quando o usuario 
estiver com o cursor dentro do campo de texto. Alterar a cor da borda do campo para 
a mesma da sombra ajuda a consolidar este efeito. 

input: focus { 

border-color: #35861B; 
box-shadow: 0 0 5px #3586IB; 
outline: none; 

> 


Faqa a sua pesquisa aqui: 


Figura 5.24: O brilho da caixa de texto, mas a sombra interna nao esta presente. 


Mas assim, a sombra que criamos anteriormente para o campo deixa de ser exi- 
bida, ja que sobrescrevemos a propriedade. A solu^ao e repetir a sombra existente, 
separando elas por virgula. Assim e possivel manter a consistencia dos estados do 
elemento. 

input: focus { 

border-color: #35861B; 
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box-shadow: 0 0 5px #3586IB, 2px 2px 2px rgba(0,0,0,0.25) inset; 
outline: none; 


Papa a sua pesquisa aqui: 


Figura 5.25: As duas sombras da caixa de texto ao receber foco. 


Se utilizando a posi^ao 0 0 criamos um efeito de brilho em sombras externas, 
fazendo o mesmo com sombras internas e possivel alcan^ar um efeito de profundi- 
dade mais pesado, como se a superficie da sua pagina nao fosse plana. Vamos criar 
um menu de navega^ao para fazer este teste. Come^ando com o HTML de uma lista 
simples. 

<ul class='nav'> 

<lixa href="#">Home</a></li> 

<lixa href~ M # M >Contato</aX/li> 

<li><a href="#">Sobre</ax/li> 

</ul> 

Vamos alinhar os elementos horizontalmente utilizando float, alem de definir 
um tamanho padrao para cada link do menu e uma cor de fundo. 

.nav { 

background-color : #B9522D; 
height : 30px; 
list-style : none; 
padding: 0; 
width: 210px; 

> 

.nav li { 
float: left; 
font-weight: bold; 
height: 30px; 
line-height: 30px; 
text-align: center; 
width: 70px; 
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> 

.nav a { 
color: white; 

> 


Home Contato Sob re 


Figura 5.26: O menu horizontal que criamos. 


Digamos que voce esta na pagina principal, e o menu deve ter uma indica^ao 
visual que o link Home e o da pagina atual. Alem de mudan^as no estilo do texto e no 
fundo do elemento, uma sombra interna pode ser utilizada para criar esta impressao. 
Primeiro, precisamos de uma classe para indicar qual dos links e o atual: 

<ul class- 'nav' > 

<li class =l current 1 ><a href="# ,, >Home</a></li> 

<lixa href="# l '>Contato</ax/li> 

<li><a href =ll #’ f >Sobre</a></li> 

</ul> 

Agora, utilizamos a mesma tecnica do brilho ao redor da caixa de texto, so que 
utilizando o inset. 

.nav .current { 
background-color: #A64A28; 
box-shadow: inset 0 0 lOpx rgba(0,0,0,0.5); 

> 


Home Contato Sobre 


Figura 5.27: O link ’Home’ nao aparenta estar pressionado? 


Alem da mudan^a para um fundo mais escuro, a sombra contribui para diferen- 
ciar o link Home dos demais. 
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CUIDADO COM SOMBRAS PESADAS 

A combina^ao de box-shadow e rgba pode trazer resultados interessantes 
para as suas interfaces, mas cuidado ao abusar de opacidade e blur juntos. 
Ross Allen, da equipe do Airbnb, percebeu que ao navegar pelo site da em¬ 
press utilizando um Chromebook, um notebook criado pelo Google que era 
disponivel para clientes da Virgin America durante os seus voos, a rolagem 
da pagina era drasticamente mais devagar do que em seu computador pes- 
soal. Utilizando ferramentas de desenvolvimento para identificar o que esta- 
ria causando esta lentidao, ele chegou a conclusao que o uso do box-shadow 
com lOpx de blur em algumas partes do site era relativamente pesado para o 
navegador exibir e reconstruir conforme a rolagem era feita, e isto era per- 
ceptivel em um computador de poder de processamento inferior, como o 
Chromebook. 

Reduzindo a densidade e contando com a posi^ao das sombras, e nao o seu 
tamanho, para criar os efeitos desejados, o problema de performance foi re- 
solvido e a experiencia de uso do Airbnb em outros dispositivos foi melho- 
rada com apenas mudan^as no uso de box-shadow. |lj 


Trabalhando com sombras em textos 

Nao tao poderosa quanto o box-shadow, a propriedade text-shadow permite 
aplicar sombras ao texto da sua pagina, e nao aos elementos. O uso das proprieda- 
des e bastante similar: voce pode posicionar a sombra a vontade e combinar diversos 
efeitos com diversas sombras, mas o text-shadow nao possui a quarta op<;ao de ta¬ 
manho do box-shadow e o termo inset nao e suportado. Entao, se voce ja se deu bem 
com uma destas propriedades, utiiizar a outra sera como um passeio de bicicleta. 

<hl>HTML & CSS</hl> 

hi { 

background-color :#1D9AC0; 
color: #FFF; 
padding: lOpx; 

text-shadow: 2px 4px 2px rgba(0,0,0,0.3); 

} 
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HTML & css 


Figura 5.28: Uni exemplo simples de ’text-shadow’. 


O uso do text-shadow pode seguir a mesmalinha do box-shadow: realgar sobre- 
posiloes e adicionar efeitos sutis para melhorar a leitura de certos textos em fundos 
diferentes. 

Imagine uma loja virtual, onde cada compra feita pode estar em um de tres esta- 
dos: Pagamento recusado, Produto enviado ou Em aprova$ao. Na exibigao dos dados 
de uma compra, podemos exibir o seu estado com uma cor de fundo relacionada a 
ele, utilizando o seguinte codigo 

<span class=' status failed' >Pagamento recusado</span> 

<span class=' status shipped' >Produto enviado</span> 

<span class= 1 status processing' >Em aprovagao</span> 

.status { 

display: inline-block; 
font-weight: bold; 
font-weight: bold; 
padding: 7px lOpx; 

> 

.failed { 

background-color: #BD2C0G; 

> 

.shipped { 

background-color: #6CC644; 

> 

.processing { 

background-color : #FC9800; 

> 
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Produto enviado 


Em aprovagao 


Figura 5.29: As indicanoes de estado - nao acha que este texto preto esta ruim? 


Para dar mais aten^ao ao texto (e nao ao fundo), podemos trocar a cor do texto 
para branco e combinar coni uma sombra, trazendo atenc^ao e preservando a leitura 
dos textos ao mesmo tempo. Para este caso a sombra com rgba e uma otima pedida. 


status { 
color: white; 
display: inline-block; 
font-weight: bold; 
f ont - weight : bold ; 
padding: 7px lOpx; 

text-shadow: 0 lpx 2px rgba(0, 0, 0, 0.7); 


Pagamento recusado I Produto enviado I Em aprovagao 


Figura 5.30: Os textos de estado utilizando ’text-shadow’. 


5.7 COMBINANDO TUDO 

Passamos por diversas propriedades muito interessantes, que utilizadas sozinhas ja 
produzem resultados visuais sensacionais. Mas ao utilizar algumas (ou todas) delas 
voce consegue compor secoes e componentes visualmente elegantes, e combinando 
algumas das tecnicas apresentadas neste capitulo junto de novos usos das proprie¬ 
dades do CSS 3 conseguimos chegar ao seguinte resultado: uma se^ao para exibir o 
livro Ruby on Rails: coloquesua aplicagao web nos trilhos, disponibilizando opqoes de 
compra e a situa^ao do livro em estoque. Este sera um otimo exercicio para combinar 
algumas das coisas que aprendemos. 
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Ruby on Rails: coloque sua aplicagao web nos trilhos 

Vinicrus Baggio 


Disponivel 



*? Comprar a versao digital 
t Comprar 0 pacote complete: 


Uma otima ieitura para iniciantes afim de se 
aventurar no ecossfstema de Ruby. 


Figura 5.31: O resultado final da segao que iremos criar. 


Vamos comegar com parte do HTML, junto do nome do livro e do autor. O CSS 
para estes texto sera bem simples, similar o que ja vimos anteriormente. 

<article class="book' r > 

<header> 

<hl>Ruby on Rails: coloque sua aplicagao web nos trilhos</hl> 
<h2>Vinicius Baggio</h2> 

</header> 

</article> 

hi { 

color: #BD2COO; 
font-size: 1.2em; 
margin: 0; 

} 

h.2 { 

font-size: lem; 
margin : 5px 0; 

> 


Ruby on Rails: coloque sua aplicapao web nos trllhos 

Vinicius Baggio 


Figura 5.32: Os estilos para o titulo e o autor do livro. 
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Em seguida, o estado de Dispontvel pode ser baseado nos exercicios de 
text-shadow que tizemos, com a adigao de um border-radius para arredondar os 
cantos do elemento. Aplicamos um fundo verde, a cor branca e uma leve sombra no 
texto, junto de alguns ajustes de espagamento e tamanhos. 

<article class= M book"> 

<header> 

<hl>Ruby on Rails: coloque sua aplicagao web nos trilhos</hl> 
<h2>Vinicius Baggio</h2> 

<span class® 1 available' >Disponivel</span> 

</header> 

</article> 

.available { 

background-color : #6CC644; 
border-radius: 3px; 
color: white; 
font-size: O.Sem; 
font-weight: bold; 
padding: 3px 7px; 

text-shadow: 0 lpx 2px rgbaCO, 0, 0, 0.7); 

} 


Ruby on Rails: coloque sua apllca$ao web nos trilhos 

Vinicius Baggio 


DJsponfvel 


Figura 5.33: A indicagao da disponibilidade do livro. 


Em seguida, criaremos o menu de compras, que combina diversos truques. O 
HTML utilizado sera uma simples lista nao ordenada: 

<ul> 

<lixa href®"#" class® 'icon paper 1 >Comprar a versao fisica</a></li> 
<lixa href®"#" class® 'icon digital' >Comprar a versao digital</a></li> 
<li> 

<a href®"#" class® 'icon package' >Comprar 0 pacote completo! </a> 
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</li> 

</ul> 

Aplicamos urn linear-gradient azul para o fundo do menu, junto de ajustes a 
espa^amento e posi^ao: 

ul { 

background-color : #56B4EF; 

background-image: linear-gradient (top, #56B4EF,#148EDA); 

float: left; 

list-style: none; 

margin: lOpx lOpx 0 0; 

padding: 0; 

width.: 230px; 

> 


E para os icones, iremos reaproveitar a fonte Iconic e utilizar alguns de seus ko- 
nes no menu. 

@font-face { 

font-family: 1 IconicFill’ ; 

sre: url( 'iconic_fill.woff' ) format ( 1 woff 1 ); 
font-weight: normal; 
font-style: normal; 

> 

.icon::before { 

font-family: ’IconicFill'; 
margin : Opx 5 px ; 

> 

.paper::before { 
content: M \e00b"; 

> 

.digital::before { 
content: f, \e044 M ; 

> 

.package::before { 
content: "\e022 11 ; 

> 
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D Gomprar a versao flslca 
$ Gomprar a versao digital 
■ Gomprar q pacote compietol 


Figura 5.34: O ’linear-gradient’ e os icones do menu. 


Para apresentar os links de uma forma mais interessante, precisamos mudar a 
sua cor e espa^ar melhor os textos dos 3 itens - outro lugar onde o text-shadow cai 
como uma luva. 

.icon { 
color: #FFF; 
display: block; 
font-size: 0.9em; 
font-weight: bold; 
padding: 5px; 
text-decoration: none; 

text-shadow: 0 Ipx 0 rgba(0, 0, 0, 0.9); 

} 


O proximo passo e criar as bordas entre os links, aplicando bordas com rgba 
utilizando preto e branco. Importante remover a borda superior do primeiro link e 
a inferior do ultimo, aproveitando as classes utilizadas para exibir os icones. 

.icon { 

border-bottom: lpx solid rgba(0,0,0, 0.3); 
border-top: lpx solid rgba(255, 255, 255, 0.3); 

} 

.icon.paper { 
border-top: none; 

} 

.icon.package { 
border-bottom: none; 

> 
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Comprar a versao digital 
* Comprar o pacote complete 


Figura 5.35: Uma versao melhorada do menu utilizando ’text-shadow’ e bordas com 
’rgba’. 


Podemos utilizar a mesma cor em rgba usada no border-top dos links para 
contornar o menu inteiro, alem de adicionar um border-radius ao seu estilo. 

ul { 

border-radius: 5 px; 

border: lpx solid rgba( 0 , 0 , 0 , 0 . 3 ); 

} 

O ultimo detalhe do menu - uma indica^ao de : hover para os links. Podemos 
aplicar um fundo preto com transparency no link, que ira aplicar um efeito em que 
o fundo azul se tornara mais escuro. 

.icon ’hover { 

background-color : rgba(0, 0, 0, 0.1); 

> 


U Comprar a versao ffsica 
Comprar a versao digital 
$ Compraro pacute complete: 


Figura 5.36: A versao final do menu com bordas arredondadas. 


E o nosso menu esta pronto, combinando bons usos de rgba, %linear-gradient, 
text-shadow e border-radius 

A descri^ao do livro sera apenas um paragrafo, sem estilo proprio algum, que 
devera ir logo apos o HTML do menu, que devido a sua defini^ao de float ira alinhar 
os 2 elementos horizontalmente. 
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< P > 

Uma otima leitura para iniciantes afim de se aventurar no ecossistema 
de Ruby. 

</p> 

O toque final sera o acabamento da sepao inteira, identificada pela dasse book. 
Vamos seguir um estilo similar ao do menu - bordas arredondadas, fundo com gra- 
diente e uma borda um pouco mais escura que o fundo, alem de fixar a largura da 
sepao e espapar um pouco o seu conteudo. 

.book { 

background-color : #FAFAFA; 

background-image: linear-gradient(#FAFAFA,#EEE); 

border-radius: 5px; 

border: lpx solid #CCC; 

padding: lOpx; 

width: 600px; 

> 


Como o nosso menu esta utilizando float, precisamos corrigir a altura da se^ao 
para que todo os elementos fiquem devidamente contidos no article, Podemos 
repetir o uso de um elemento vazio com a dasse clear ao final do conteudo. 

<div class= 'clear 1 ></div> 

.clear { 

clear: both; 

} 


Ruby on Rails: coloque sua aplicapao web nos trilhos 


Vinicius Baggio 



Lima otima leitura para iniciantes afim de se 
aventurar no ecossistema de Ruby. 


Figura 5.37: A versao final da sepao sobre o livro. 
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Estes sao alguns do exemplos do que e possivel criar juntando gradientes, som- 
bras e similares. Combina^oes similares podem ser uteis para criar botoes, cabe^a- 
lhos e rodapes, barras laterals e diversos outros componentes de interface que voce 
precise nos seus projetos. 


93 




CAPfTULO 6 

Tomando controle da estrutura 
visual 


Uma das maiores complicates em projetos grandes e complexos e estruturar e posi- 
cionar corretamente todos os elementos existentes em uma pagina. Encaixar menus, 
barras laterals, imagens e textos nos seus devidos lugares pode resultar em urn HTML 
complexo e um CSS muito extenso se nao for feito corretamente. E importante com- 
preender a necessidade de cada grupo de elementos, e o contexto do elemento pat 
que os envolvem. Existem solutes similares para certos casos, mas o impacto de 
cada opt© deve ser levado em considera^ao. 

Temos 3 propriedades bastante importantes para se controlar o fluxo e a posi^ao 
dos seus elementos: display, position e float. Utilizamos elas em outros capitu- 
los, mas nao chegamos no detalhe seus motivos e o que elas estao fazendo com os 
nossos elementos. Hora de olhar cada uma delas e entender melhor o seus papeis na 
estrutura to dos seus elementos. 



6.1. A propriedade 'display’ 
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6.1 A PROPRIEDADE ‘DISPLAY* 

A propriedade display determina como um elemento sera exibido pelo navegador. 
Elementos de texto, como a, span e small, possuem um valor inline, que permite 
que elementos seguintes se mantenham na mesma linha que o atual, e nao sao afeta- 
dos por propriedades como height e width. Containers como div, p, section e simi- 
lares sao tratados como blocos - com o valor padrao de block - quebrando o fluxo dos 
elementos em uma nova linha e ocupando a largura maxima que Ihe e permitida. Ele¬ 
mentos de uma tabela, como td“/ t , thead e tr possuem seus proprios valores 
de display, como table-cell e table-rowmas se comportam como elementos de 
bloco. Uma forma de se testar o comportamento dos elementos e simplesmente adi- 
cionar uma cor de fundo para cada um deles e observar o espaqo preenchido. 

P < 

background-color : LimeGreen; 

} 

span E 

background-color : LightBlue; 

> 

<span>inline</span> 

<span>inline</span> 

<p>block</p> 


inline inline 
block 


Figura 6.1: A diferen^a de elementos ’inline’ e ’block 1 . 


Alem dos valores padroes, existem duas outras possibilidades bastante uteis para 
a propriedade display: o none e o inline-block. 

O none faz com que o elemento e todo o seu conteudo sumam da pagina, como se 
nao estivessem presentes no HTML, enquanto o inline-block mistura o comporta¬ 
mento dos valores block e inline - os elementos nao geram quebras, mas possuem 
as dimensoes equivalentes ao seu comportamento da propriedade block. Ele seria 
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uma solu^ao perfeita para muitos problemas se nao fosse um detalhe: o espa^o entre 
os elementos no HTML impacta na exibiipao deles. Considerando o CSS a seguir: 

span { 

display: inline-block; 

> 


E o HTML com o estilo aplicado: 

<span>inline-block</span> 

<span>inline-block</span> 

<span>inline-block</span> 

<br> 

<span>inline-block</span><span>inline-block</span> 


inline-block inline-block inline-block 
inlirte-biockintine-block 


Figura 6.2: O comportamento do ’inline-block’ com e sem quebra de linhas entre os 
elementos. Complicado, nao?. 


Caso exista uma quebra de linha ou um espa^o entre os elementos no HTML, 
a renderiza^ao deles com inline-block ira possuir um espa^o em branco - o que 
muitas vezes nao e o desejado. Chris Coyier, do CSS - Tricks propoe diversas solu^oes 
tl! para este problema, mas nenhuma me parece valida o suficiente para ser utilizada 
com frequencia, Assim como sugere o final do post, sou adepto de optar pelo uso de 
float nestes casos. 


6.2 Flutue elementos 

A propriedade float e uma das solu^oes mais versateis quando se trata de alinhar 
e posicionar elementos, que teve origem na diagrama^ao de textos no mundo da 
midia impressa onde e bastante comum ver imagensflutuando ao lado de peda^os de 
texto, como em uma materia de uma revista. Na web essa tecnica evoluiu e soluciona 
diversos casos de posicionamento de elementos. 
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O caso mais simples e para alinhar elementos horizontalmente, flutuando parte 
deles e deixando que o resto acompanhe pela lateral, dessa forma, com o seguinte 
HTML: 

<h2>#l</h2> 

<h4>500 pontos</h4> 

<p>Premio para o campeao: 1 MacBook Pro 15'* .</p> 

E o CSS: 
h2 { 

float: left; 
margin: 0 20px 20px 0; 

} 

h4 { 

margin-top: 5px; 

> 


Teremos: 


#1 500 pontos 

Premio para a campeao: 1 MacBcok Pro 15". 


Figura 6.3: Alinhando elementos com ’float: left’ 


Elementos com apropriedade float sao tratados como elementos de bloco (lem- 
bra do display: block ?), mas sem ocupar os 100% de largura tradicionais desses 
elementos. E da mesma forma que ele pode flutuar para esquerda, ele pode ir para a 
direita. 

h2 { 

float: right; 

> 
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500 pontos #1 

Premia para a campeao: 1 MacBookPro 15". 


Figura 6.4: Voce tambem pode jogar os seus elementos para a direita com ’float: 
right’ 


Para garantir que um elemento nao va seguir a orienta^ao de um antecessor que 
esteja com float, voce precisa utilizar a propriedade clear, Voce pode informar o 
mesmo sentido que os seus elementos estao flutuando - left ou right - ou utilizar 
both, que quebra o fluxo em ambos os sentidos. 

P < 

clear: both; 

> 


#1 500 pontos 

Premio para 0 campeao: 1 MacBook Pro 15". 


#1 500 pontos 

Premio para 0 campeao: 1 MacBook Pro 15". 


Figura 6.5: O efeito da propriedade ’clear’ - o paragrafo nao esta mais alinhado com 
o titulo. 


Outra aplica^ao tradicional da propriedade float e para alinhar imagens e tex- 
tos, similar a uma materia de jornal, onde a imagem fica ao lado do texto que a 
acompanha. 
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<h3>How I Met Your Mother</h3> 

<img src= ,, himym.jpg M > 

<p> 

A serie gira em torno da vida de Ted Mosby e dos seus amigos, 
que e narrada pelo proprio aos seus filhos, 25 anos mais tarde. 
Bob Saget, como Ted Mosby do futu.ro, conta entao aos filhos as 
historias e peripecias que o levaram a conhecer a mae deles. 

As outras personagens principals sao Marshall Eriksen, 

Robin Scherbatsky, Lily Aldrin e Barney Stinson. 

</p> 

<p> 

Em 2005, aos 27 anos, o jovem Ted Mosby (Josh Radnor), apos o 
seu melhor amigo, Marshall Eriksen (Jason Segel), ficar noivo, 
decide finalmente ir em busca da sua cara-metade. Com gestos 
romanticos questionaveis, Ted conhece Robin Scherbatsky 
(Coble Smulders), no bar que costumavam frequentar, 

Maclaren's Pub. 

</p> 


How I Met Your Mother 


hotv i 

mofKer 


A serie gira em torno da vida de Ted Mosby e dos seus amigos, que e narrada pelo 
proprio aos seus fi lhos, 25 anos mais tarde. Bob Saget como Ted Mosby do future, 
conta entao aosfifhos as historias e peripecias que o levaram a conhecer a mae 
deles. As outras personagens principals sao Marshall Eriksen, Robin Scherbatsky, 
Lily Aldrin e Barney Stinson. 

Em 2005, aos 27 anos, o jovem Ted Mosby (Josh Radnor), apds o seu melhor 
amigo, Marshall Eriksen (Jason Segel), ficar noivo, decide finalmente ir em busca da 
sua cara-metade. Com gestos romanticos questionaveis, Ted conhece Robin 
Scherbatsky (Coble Smulders), no bar que costumavam frequentar, Maclaren's Pub. 
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Com um simples uso de float e uma margem (para o texto nao ficar colado 
com a imagem) o texto se posiciona ao lado da imagem, fluindo perfeitamente caso 
o texto seja muito grande, exatamente como o nosso exemplo. 

img { 

float: left; 
margin-right : lOpx; 

> 


How I Met Your Mother 


A serie gira smtorno davidadeTed Mosbye 
dos seus amigos, que e narrada pelo prdprio 
aos seus lilhos, 25 anos mais tarde. Bob Saget, 
como Ted Mosby do futuro, corita entao aos 
filhos as historias e peripetias que o levaram a 
coohecer a mae deles. As oulras personagens 
principais sao Marshall Eriksen, Robin 
Scherbalsky, Lily Aldrin e Barney Stinson. 

Em 2005, aos 27 anos, o jovem Ted Mosby 
(Josh Radnor), apos o sen meihor amigo, Marshall Erlksen (Jason Segei), ficar 
noivo, decide finaimente ir em buscada sua cara-metade. Com gestos romanticos 
questionavets, Ted conhece Robin Scherbatsky (Cobie Smulders), no bar que 
costumavam Irequentar, Maclaren's Pub. 




Figura 6.6: Por padrao, o texto licara abaixo da imagem, ocupando bastante espaco 
vertical. 


E da mesma forma que organizamos elementos em exemplo menores, podemos 
organizar os principals elementos da pagina utilizando float. Hora de por a mao na 
massa e ver isso em a^ao: 

<section class= 1 posts 1 > 

<article> 

<hl><a href- 1 # 1 >Titulo do post #l</a></hl> 

<span class= 1 timestamp f >3 semanas atras</span> 

<P> 

Uma breve descrigao sobre o assunto abordado no post numero 1... 

</p> 

</article> 


101 




6.2. Flutue elementos 


Casa do Codigo 


<article> 

<hl><a href= 1 # 1 >Titulo do post #2</a></hl> 

<span class- 'timestamp' >3 semanas atras</span> 

<P> 

Uma breve descrigao sobre o assunto abordado no post numero 2... 

</p> 

</article> 

</section> 

Vamos dedicar uma area de 600px para esta listagem, posicionando a informagao 
da data do post a direita do titulo, devidamente alinhado. 

.posts { 
width: 600px; 

> 

hi { 

float: left; 
margin: 0 0 20px; 

} 

.timestamp { 
background-color : #000; 
color: #FFF; 
float: right; 
font-size: 0.9em; 
margin-top: lOpx; 
padding: 5px lOpx; 

> 


Titulo do post #1 


Uma breve descripao sobre o 
assunto abordado no post 
numero 1... 


3 semanas atrls 


Titulo do post #2 


Uma breve descrigao sobre o 
assunto abordado no post 
numero 2 ... 


3 semanas atras 


Figura 6.7: Os primeiros estilos da listagem de posts, organizando os elementos com 
’float’. 
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O titulo e a informa^ao da data estao nos seus devidos lugares, mas a descri^ao 
nao deve ficar entre eles, e sim abaixo do titulo. Hora de aplicar a propriedade clear 
entao. 

P < 

clear: both; 

> 


Titulo do post #1 


3 semanas atris 


Unna breve descrifao sobre o assunto abordado no post numero 1... 


Titulo do post #2 


a semanas atris 


Uma breve descrigao sobre o assunto abordado no post numero 2 ... 


Figura 6.8: Corrigindo a posii’ao dos paragrafos. 


Vamos incrementar o nosso cenario. Hora de posicionar uma rela^ao de links ao 
lado direito da se^ao de posts. Como fizemos na se<^ao |2.6[ a forma mais simples de 
tratar este o posicionamento de elementos e flutuando cada um - o conteudo prin¬ 
cipal e a barra lateral - para lados diferentes. Entao, temos o HTML com a lista de 
posts: 

<aside> 

<h3>Veja outros posts</h3> 

<ol> 

<li><a href- ,r #' r >Post #3</ax/li> 

<li><a href= ,, #’ , >Post #4</a></li> 

<lixa href= "#’ f >Post #5</ax/li> 
clixa href= ,r #’ r >Post #6</a></li> 

</ol> 

</aside> 

E o CSS que coloca a lista com outros posts, que estera dentro do aside, no lado 
direito, enquanto que a listagem dos posts que haviamos feito antes sera exibida do 
lado esquerdo. 

.posts { 

float: left; 
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width: 600px; 

> 

aside { 

background-color : #FFFBE4; 
border: lpx solid #C9BC8F; 
float: right; 
padding: lOpx; 
width: 200px; 

> 

aside h.3 { 
margin: 0; 

} 


Veja outros posts 

1. PosU3 

2. Past ff4 

3. Poa( 

4. Past m 


Figura 6.9: O visual da se^ao lateral de links. 


Com cada segao flutuando para um lado, vamos colocar ambos elementos em 
uma nova div, para definir uma largura limite para o conteudo e centraliza-lo. 

<div class= 'page 1 > 

<section class= 'posts 1 > 

<!— ... os 2 posts principais ... —> 

</section> 

<aside> 

<!-- ... e a lista de links para outros posts ... --> 

</aside> 

</div> 

.page { 

padding: lOpx; 
margin: 0 auto; 
width: 940px; 

> 
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Titulo do post #1 | 

Uma breve describe sobra 0 ass unto abort ado no post nOmero t... 

Tftulo do post #2 | 

Urns br9ve descri £ao sobra □ assume abort ado no post numsrD 2... 


a sam anas anas 


3 asm anas atria 


Veja outros posts 

1. Posttfa 

2. Rost #4 

3. Foal #5 

4. 


Simples, certo? agora vamos aplicar uma cor de fundo a nova div, que criamos, 
que devera preencher todo o fundo do conteiido da pagina. 

• page { 

background-color : #E8E8E8; 


> 


Titulo do post #1 | 

Umabnevs desepgao sob-re 0 assunto abordado no post numoro 1.. 

Tftulo do post #2 | 

Uma breve descri fio sob^e 0 assunto abordado no post numera 2... 


3 s-emartas atras 


Veja outros posts 


2 n a& at rap. 


POSl *4 

Post #6 


Figura 6.10: A cor de fundo nao foi aplicada corretamente na pagina... 


Mas esse nao e o resultado que queremos! Um elemento com float nao contri- 
bui com a altura do seu container, entao elementos como o nosso .page aparentam 
ter apenas alguns px de altura, devido ao seu padding, e o seu conteiido com float 
aparenta ter vazado do elemento. A solu^ao para este comportamento estranho e 
ter um elemento com clear logo apos os elementos com float que causaram este 
efeito. 

Em exemplos anteriores isto foi feito utilizando um elemento vazio, mas esta 
solu^ao acaba sujando o nosso HTML com elementos vazios para ajustar casos como 
esse. A seguir iremos conhecer uma solu^ao mais adequada para este problema. 
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6.3 O CLEARFIX, UMA CLASSE OBRIGATORIA EM SEUS PRO¬ 
JETOS 

Este problema classico de uso de float pode ser solucionado com um elemento va- 
zio apos o conteiido que flutua, mas nao precisamos adicionar tags vazias ao nosso 
codigo, pois estes elementos adicionais ja estao presentes na pagina - os pseudo ele¬ 
mentos, que foram apresentados na seyao pjT^ 

O chamado clearfix hack consiste em adicionar estilos especificos para os 
pseudo elementos de um container que tenha elementos com float e precise ter 
a sua altura adequada ao conteiido. 

O codigo CSS necessario e bem pequeno, mas bastante efetivo: 

.clearfix::before, 

.clearfix::after { 
content: ,MI ; 
display: table; 

> 

.clearfix::after { 
clear: both; 

} 

.clearfix { 

♦zoom: 1; 

} 


Este uso especifico do valor table para a propriedade display serve para ajus- 
tar bugs de margem entre o container e os elementos com float e o uso de clear: 
both no :: after produz o mesmo resultado de se colocar um elemento vazio apos 
o conteiido. 

A ultima parte - a propriedade zoom, e uma tecnica especifica para versoes antigas 
do Internet Explorer (6 e 7, para ser exato) e pode ser ignorada caso voce nao precise 
trabalhar com estas versoes deste navegador. 

Sem precisar de novos elementos, podemos adicionar a classe clearfix na div 
do exemplo anterior, assim solucionamos o problema da sua cor de fundo. 

<div class= 1 page clearfix '> 

<section class= T posts 1 > 

<!-- ... os 2 posts principals ... —> 
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</section> 

<aside> 

<!-- ... e a lista de links para outros posts ... —> 
</aside> 

</div> 


Titulodopost#! 


3 asmanasalras 


Uma breve descrigao sob^e o assonto abordado no post nutmero 1... 


Tftulo do post #2 


3 semap as atras 


Uma brave cescr ^Io sobra o assanto abordado no post numera 2... 


Veja outros posts 

1. Pest m 

2. Post U 

3. Post #5 

4. Posl^e 


Figura 6.11: Sucessol problema de cor de fundo resolvido. 


Eventualmente, alguns desenvolvedores acabam utilizando algum outro nome 
para a classe cl ear fix, como cf, reduzindo o nome para se escrever menos, ou 
group, para expressar melhor o contexto de uso. Independente do nome, sempre 
tenha ela nos seus projetos para tratar este problema classico de uso da propriedade 
float. 


6.4 COMPREENDA O USO DE POSITION 

Outra forma de controlar o posicionamento dos seus elementos e combinar o uso 
da propriedade position e das propriedades de coordenadas top, right, bottom e 
left. De acordo com o valor do position, as coordenadas sao aplicadas de uma 
forma diferente, o que muda toda a perspectiva de uso desse grupo de propriedades. 

Dos quatro valores posslveis, o mais simples e o static. E o valor padrao para 
todos os elementos, e a sua posfoao nao e afetada por nenhuma das propriedades 
de coordenadas, deixando que o navegador posicione o elemento no seu lugar de 
origem. 

O valor fixed remove o elemento da sua posi^ao original (reorganizando os ele¬ 
mentos adjacentes, caso seja necessario) e fixa a sua posi^ao na janela do navegador. 

A posi^ao do elemento e preservada conforme o usuario navega para cima e para 
baixo com a rolagem da pagina, litil para caixas de mensagem que devem sobrepor 
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o conteudo ou elementos que devem acompanhar o fluxo do usuario pela pagina, 
como uma caixa de links de navega^ao. 

Os dois outros valores possiveis sao os que mais confundem os desenvolvedores: 
relative e absolute, 

Com o valor relative, as coordenadas sao aplicadas a partir do ponto original 
do elemento, assim: 

<div class='box'> 

Teste 

</div> 

.box { 

background-color : PapayaWhip; 

height: lOOpx; 

width: lOOpx; 

position: relative; 

top: 3Gpx; 

left: 5px; 

} 


Teste 


Teste 


Figura 6.12: A combina^ao do ’position: relative’ e ’top’ afetando a posi^ao de um 
elemento. 


Diferente do uso de margin, o elemento com position: relative nao ira afe- 
tar a posi^ao dos elementos presentes ao seu redor. Por exemplo, o uso de top nao 
empurra os elementos seguintes para baixo, mas posiciona a div por cima deles, as¬ 
sim: 
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<div class='box'> 

Teste 

</div> 

<p>Um paragrafo de texto logo abaixo</p> 


Teste 


L ie texto logo abaixe 

Figura 6.13: O elemento com position pode acabar por cima de outros elementos. 


Ja o valor absolute possui um comportamento mais complicado de se acostu¬ 
rn a r. 

Elementos absolutamente posicionados sao afetados pelas coordenadas das pro- 
priedades top, bottom e alins. No entanto, elas sao aplicadas a partir do seu primeiro 
elemento paique que nao tenhaposition: static -entao, elementos absolutos sao 
relatives a um elemento pai. Case nenhum elemento acima dele na hierarquia da sua 
pagina atenda a este criterio, o body sera utilizado como referenda. 

<hl>Posicionado com "absolute"</hl> 

hi { 

background-color: LightBlue; 
position: absolute; 
top: 20px; 
left: 30px; 

> 


Neste exemplo, o hi esta sendo posicionado de acordo com o body. Mas se co- 
locarmos ele dentro de outro elemento que este)a posicionado como relative, por 
exemplo, a posi^ao do hi sera afetada. 

<header> 

<hl>Posicionado com "absolute 11 </hl> 

</header> 
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header { 

margin-top: 30px; 
position: relative; 

} 


Posicionado com "absolute" 

Posicionado com "absolute" 


Figura 6.14: Ao utilizar o ’position: relative’ no header, a posi^ao do hi muda. 


Esta peculiaridade do uso de absolute pode apresentar muitos problemas, mas 
tambem adiciona muita flexibilidade ao uso deste valor. 

Como os elementos com absolute e fixed sao removidos do fluxo padrao da 
pagina, eles nao afetam a altura dos elementos que supostamente os contem, o que 
gera um problema similar ao uso de float, mas sem uma solucao similar ao truque 
do clearf ix. 


6.5 Crie a sua propria janela modal 

Janelas modais sao um elementos recorrentes em diversos sites e sao bons exemplos 
de aplica^ao de position. 

Vamos come^ar com uma div e um paragrafo, que serao o conteudo do nosso 
modal. 

<div class= 'notice 1 > 

<hl>Atengao</hl> 

<p>Aqui voce pode exibir alguma mensagem importante, que ela ira 
sobrepor todo o conteudo do seu site.</p> 

</div> 

Vamos definir alguns estilos basicos para definir o formato da caixa que ira conter 
este conteudo, para garantir que a div tenha uma altura e largura fixa, que ira facilitar 
seu posicionamento. 

.notice { 

background-color : #FFF; 
border: lpx solid #000; 


no 
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height: 130px; 
padding: lOpx; 
width: 380px; 

> 


Hora de posicionar o modal no centro da pagina, combinando a propriedade 
position com as coordenadas top e left. 

.notice { 
position: fixed; 
top: 50%; 
left: 50%; 

> 


Neste caso, e indicado utilizar o valor f ixed e nao o absolute - apesar da posi^ao 
do elemento ser a mesma, a vantagem de se utilizar o fixed e que caso a sua pagina 
exiba a barra de rolagem vertical, o modal ira acompanhar a rolagem para cima e 
para baixo do usuario. 

Com as porcentagens no top e left, o canto superior direito do modal esta po~ 
sicionado no centro da pagina, mas precisamos alinhar o elemento todo. Como 
fixamos a largura e altura do modal, fica simples corrigir isto utilizando margens 
negativas, finalizando o CSS para esta parte do modal. 

.notice { 

background-color : #FFF; 
border: lpx solid #000; 
height: 130px; 
padding: lOpx; 
width: 380px; 
position: fixed; 
top: 50%; 
left: 50%; 

margin: -75px 0 0 -200px; 

> 


ill 
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Atengao 

Aqui voce pode exibir aigurna mensageim importante, 
que eia \r& sofrepor todo o conteddo do seu site. 


Figura 6.15: O conteudo do nosso modal, devidamente centralizado na pagina. 


A propriedade margin e aplicada de metade da altura do elemento (I 50 px) no 
topo e metade da largura ( 400 px) na margem esquerda (margin-left) do elemento, 
onde ambos os valores sao negativos, para o elemento retroceder alguns px de volta 
para o centro da pagina. 

Outro comportamento que sempre acompanha as janelas modais e uma sobre- 
posi^ao de cor - geralmente preta ou branca e com uma certa opacidade, entre o 
conteudo da sua pagina e a sua janela modal. 

Com a sobreposi^ao de cores, e posslvel enfatizar a diferen^a do modal em rela- 
$ao ao resto da pagina, e ate mesmo impedir que o usuario interaja com o conteudo. 
Isto costuma ser feito com outro elemento fixo, ocupando todo o espa^o util do na- 
vegador, que costumamos chamar de overlay. 

<div class= 'notice 1 > 

<hl>Aten 5 ao</hl> 

<p>Aqui voce pode exibir alguma mensagem importante, que ela ira 
sobrepor todo o conteudo do seu site.</p> 

</div> 

<div class= 'overlay 1 ></div> 

Podemos fazer um CSS para nosso overlay: 

.overlay { 
position: fixed; 
top: 0; 
left: 0; 

background-color : rgba(0, 0, 0, 0.5); 
width: 100%; 
height: 100%; 

} 
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Atenpao 

Aqui vote pode exibrr alguma mensagenrr importante, 
qua elair& sabreportodo o oonteudo do seu site. 


Figura 6.16: Adicionamos o overlay, mas ele esta sobrepondo o modal. 


Mas a nossa implementa^ao levantou um problema - o . overlay ficou por cima 
do .notice. 

Como os elementos com position: fixed ou position: absolute sao em- 
pilhados por cima da pagina, a ordem do posicionamento e dada pela ordem dos 
elementos no HTML - entao como . overlay aparece apos o .notice, ele sera posi- 
cionado por cima de tudo. 

Podemos corrigir isto de duas maneiras - ou colocamos o codigo HTML da div 
antes do HTML do nosso modal, ou podemos controlar a ordem das posi^oes com 
a propriedade z-index, da seguinte forma: 

.notice { 
z-index: 1; 

> 


Atenpao 

Aqui vote pode exibir alguma mensagem fmportante, 
que ala sobrepor todo o conteudo do seu site. 


Figura 6.17: Problema de sobreposi^ao resolvido! 


A propriedade z-index redefine a ordem dos elementos que estao posiclonados 
no mesmo contexto (no caso dos nossos elementos, estao posicionados de acordo 
com o body). 
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Elementos sem a propriedade z-index sempre ficarao atras daqueles que pos- 
suem a propriedade, e entre os que possuem o z-index definido, os que tiverem urn 
valor maior serao posicionados a frente dos de valor menor. 

Elementos em contextos diferentes - como dois elementos com position: 
absolute, porem contidos em elementos diferentes com position: relative - 
nao compartilham da mesma sequencia de aplica^ao do z-index, entao e bem fa- 
cil se complicar com a ordem dos elementos quando se possui uma pagina muito 
complexa. 

Para casos assim, e indicado que os elementos do seu modal sejam os ultimos ele¬ 
mentos de todo o seu HTML. Alem de evitar problemas com a mudan^a de position 
de outros elementos, voce garante que ele estara por cima do seu conteudo de acordo 
com a ordem padrao dos elementos. 

O comportamento do modal via JavaScript 

Com este codigo pronto, podemos come^ar a adicionar o comportamento em 
JavaScript para exibir ou esconder o modal. Vamos esconder os 2 elementos e adici¬ 
onar um link para exibir o modal quando necessario. 

<a id- 1 show-modal 1 href=' javascript:; 1 >Exibir modal</a> 

.notice, .overlay { 
display: none; 

} 


Exibir modal 


Figura 6.18: O link para exibir o modal, sem estilo nenhum. 


O codigo JavaScript para exibir o modal e bastante simples caso voce esteja uti- 
lizando j Query. 

$C'#show-modal' ).on( 'click' , functionO { 

$(' .overlay, .notice 1 ).showO ; 

}); 
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Estas linhas de JavaScript sao responsaveis pelo seguinte comportamento: ire- 
mos associar uma fun^ao ao evento de click de qualquer elemento que atenda o 
seletor #show-modal (o botao, neste caso). Esta fun^ao ira selecionar os elementos 
do nosso modal e ira modificar a propriedade display para exibir eles para o usua- 
rio. 

Agora que conseguimos exibir o modal, precisamos esconde-lo tambem, certo? 
Para isso, vamos precisar de um botao de fechar, dentro do modal, que pode ser 
posicionado por cima do canto superior direito do elemento, quase que saindo do 
espa^o do modal. Seu HTML e um simples link: 

<div class='notice l > 

<hl>Aten 5 ao</hl> 

<p>Aqui voce pode exibir alguma mensagem importante, que ela ira 
sobrepor todo o conteudo do seu site. 

</p> 

<a href=' javascript' class=’ close 1 >Fechar</a> 

</div> 

E o seu CSS: 

.notice .close { 
background-color : #FF1A2D; 
color: #FFF; 
padding : 5px; 
position: absolute; 
right : -25px; 
top: -12px; 

> 


Fechai 


Figura 6.19: O botao para fechar o nosso modal. 


Como o .notice ja possui uma defini^ao de position, fica facil posicionar o bo¬ 
tao de " Fechar ” em relaqao a posi^ao do modal com outra combina^ao de position + 
coordenadas. E o que resta e adicionar o evento de click deste botao para esconder 
os elementos do modal. 
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$('. overlay, . close 1 ) .on( 1 click' , functionO { 

$(' .overlay, .notice 1 ).hide(); 

}); 

Vamos associar o evento de clickde dois elementos - o . overlay e o . close, se- 
parando os dois seletores com uma virgula - e o evento ira esconder tanto o . overlay 
quanto o . notice. Assim, caso o usuario clique fora da jane la ela sera fechada, e esta 
aqao nao ficara reduzida para apenas o pouco espaco ocupado pelo botao. E e pos- 
sivel ir alem: associar o evento de keydown do teclado do seu usuario para esconder 
o modal caso ele tecle ESC. Tente adicionar este comportamento e veja como fica o 
resultado final! 


6.6 Como escolher os metodos para posicionar os 
seus ELEMENTOS 

Passamos por algumas opt^oes diferentes de como estruturar e posicionar os nossos 
elementos nos layouts, mas a escolha de se devemos usar di splay: inline -block 
ou position: absolute em um determinado caso pode lhe custaralguns minutos, 
por isso e bom ter em mente em quais cenarios cada combina^ao de propriedades e 
mais indicada para ser usada. 

Enquanto resultados similares podem ser alcanqados com tecnicas parecidas, so- 
lu^oes mais simples e que requerem menos codigo sao sempre recomendadas para 
facilitar a manuten^ao do seu projeto. 

Se o espa^amento entre elementos com display: inline-block nao for um 
problema para voce, como na estrutura^ao de um campos e rotulos em um formu- 
larios, utilize esta propriedade, por ser a implementa^ao mais simples. Para casos 
de alinhamento horizontal mais complicados, em que o espa^amento causado pelo 
inline-block nao seja uma op^ao, combine float com algum elemento com clear 
ou use o truque do clearf ix no container dos elementos em questao. 

Para casos de sobreposi^ao de elementos ou cenarios onde voce precisa posicio¬ 
nar um elemento em um ponto especlfico, como no uso de pseudo elementos como 
leones ou decorates visuais, ou botoes e titulos que vazam o espaco de seus contai¬ 
ners, combine o position: absolute com o position: relative para ter total 
controle da posi^ao dos seus elementos. 
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6.7 Grids - um padrao de estrutura para as suas pa- 
gin as 

Grids sao um sistema de regras para delink um numero de colunas disponlveis nos 
seus layouts para delink a largura e espagamento dos seus elementos de acordo com 
o tamanho padrao e espagamento entre uma coluna e outra. Voce pode utilizar qual- 
quer tipo de grid, de 12 ou 16 colunas, de larguras fixas ou relativas, com espagamento 
entre colunas ou nao. 

Diversas implementagoes e frameworks estao disponlveis por ai, como o classico 
96o.gs (http://960.gs/), Twitter Bootstrap ou o Foundation (voce pode ler mais a 
respeito destes ultimos na segao |io,i} , mas voce pode criar o seu proprio grid para 
os seus projetos. 

Pegaremos o seguinte grid como exemplo: 9 colunas de 50 px cada, com lOpx de 
margens laterals. Podemos delink que a coluna principal de conteudo ira ocupar o 
espago de 6 colunas do grid, enquanto a barra lateral ocupara 3 colunas. 

<article c1as s=* column six-columns ’> 

<!-- Conteudo principal... --> 

</article> 

<aside class= 'column three-columns’ > 

<!-- links de navegagao —> 

</aside> 


Lorem ipsum dolor sit amet, consectetur adipssicing elit, 
sed do eiusmod tempor incididunt ullabore etdolore 
magna aliqua. Utenim ad minim veniam, quisnostrud 
exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure dolor in 
reprehenderit in voluptate vetit esse ciilum dolore eu 
fugiat nulla pariatur. Excepteursint occaeeat eupidatat 
non proident, sunt in culpa qui officia deserunt moilit 
anim id est laborum. 


Item do menu 

Item do menu 

Item do menu 

Item do menu 


Figura 6.20: Um exemplo de conteudo distribuido entre colunas de um grid. 
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As dehni^oes de classes para a quantidade de colunas que um elemento pode 
ocupar sao as regras de largura que os seus elementos devem seguir. Neste exemplo, 
nao podemos ter tuna barra lateral que ocupe 200px ou espa<;ar sepoes adjacentes 
em mais do que 20px. Tais padroes de tamanho e espa^amento podem economizar 
muito trabalho na defini^ao dos layouts e na escrita do seu CSS. 

Antes de abra^ar o uso de grids como uma solu^ao perfeita para os seus proble¬ 
mas, nao deixe se atentar a pontos importantes ao colocar a mao na massa: o seu 
grid que deve se adequar ao seu conteudo, e nao o contrario. E e muito facil de se 
complicar delinindo um numero maior de colunas do que o necessario - um grid de 
3 ou 5 colunas pode ser o suficiente para a maioria dos seus projetos. 

6.8 POSICIONANDO ELEMENTOS COM CSS 3 

Existem diversas tecnicas diferentes que podemos utilizar para diagramar e posi- 
cionar os elementos nos nossos projetos, mas nem todos os cenarios e problemas 
possuem soluqoes simples e elegantes - e comum encontrar ajustes e correcoes feitas 
via JavaScript para problemas que deveriam ser solucionados com CSS. 

Algumas adiqoes do CSS3 permitem que problemas antigos sejam solucionados 
com codigos novos, o que e razao de festa para qualquer desenvolvedor. 

Mas aten^ao, pois os modulos do CSS3 relacionados a posi^ao e controle de 
conteudo nao estao tao maduros quanto as de propriedades como box-shadow ou 
border-image, entao e importante conferir a situaqao do suporte dos navegadores a 
essas novidades. 

Distribui^ao de conteudo em colunas 

Distribuir um bloco de conteudo - textos, links ou imagens - em diversas colunas 
ficou muito facil. Em vez de dividir o conteudo manualmente em elementos separa- 
dos e se preocupar com a largura e espaqamento entre eles voce pode simplesmente 
deixar esta tarefa para o navegador, com a propriedade column-count, onde voce 
define a quantidade de colunas que o seu elemento tera, e fica a cargo do navegador 
distribuir o conteudo e dimensionar cada uma, independente do tamanho do seu 
elemento. 

Alem disso, existem propriedades adicionais para definir novos detalhes do 
comportamento das suas colunas, como column-gap (espa^amento entre colunas), 
column-rule (a borda que dividira as colunas) ou column-fill (a regra utilizada 
para distribuir o conteudo entre as colunas). Um exemplo a seguir demonstra quao 
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simples e dividir urn pedago de conteudo entre colunas. 

<p> 

Firefly e uma serie de ficgao cientifica criada pelo escritor/diretor 
Joss Whedon, criador de Buffy: A Caga Vampiros, Angel e Dollhouse, 
com sua companhia de produgao Mutant Enemy Productions. Seu ambiente 
futurista naturalista, modelado a partir de temas dos filmes de Western 
tradicionais, apresenta um cenario de ficgao cientifica atipico para a 
narrativa. Whedon tambem trabalhou como produtor executivo, 
junto com Tim Minear. 

</p> 

E o CSS que utiliza as novas regras para colunas: 


P { 

column-count: 3; 
column-gap: lOpx; 
column-rule: lpx solid #666; 
font-size: 0.9em; 
width: 500px; 

> 


um cen&rio do ricgao 
cientiHca atipico para a 
narrativa. Whedon 
tambem trabalhou como 
produtor executivo, junto 
com Tim Minear. 


Firefly e uma serie de 
ticgao cientifica criada 
pelo escritor/diretor Joss 
Whedon, criador de 
BufFy: A Gaga Vampiros, 
Angel e Dollhouse, com 
sua companhia de 


produgao Mutant Enemy 
Productions. Seu 
ambiente futurista 
naturalista, modelado a 
partir de temas dos 
filmes de Western 
tradicionais, apresenta 


Figura 6.21: A divisao automatica do conteudo em colunas com CSS 3. 


Elementos flexiveis 

Um modulo bastante interessante do CSS3 e o CSS Flexible Box Layout Module, 
que introduz diversas propriedades novas para delink regras de posicionamento e 
alinhamento relativas, onde os elementos presentes em um container flex serao or- 
ganizados automaticamente pelo navegador, de acordo com as definigoes feitas, sem 
a necessidade de se fixar tamanhos ou for gar alinhamentos com float ou position. 
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Tudo se baseia no novo valor da propriedade display: flex. Com ele, a gama 
de propriedades do f 1 exbox estarao disponiveis para os elementos contldos dentro 
deste container. Como, por exemplo, forgar uma orientagao vertical ou horizontal, 
sem a necessidade de aplicar a propriedade float nos elementos. Ou, entao, distri- 
buir a largura do elemento entre seus filhos, alterar a ordem de exibigao ou forgar 
um espagamento igual para todos. 

Mas como nem tudo sao flores, a especificagao deste modulo sofreu uma rees- 
crita pesada e ainda esta em constante atualizacao. A versao antiga da especificagao 
foi implementada em diversos navegadores, mas o novo formato ainda nao esta ma- 
duro o sufkiente para se utilizar em seus projetos. Mas eu sugiro que voce fique de 
olho nas novidades relacionadas ao f lexbox, ja que logo mais ele podera ser adotado 
em seus projetos. 

Vamos dar uma olhada de perto no que eposslvel fazer com o f lexbox: primeiro, 
vamos precisar de uni container com 3 elementos, onde eles irao preencher toda a 
largura disponivel igualmente: 

<div class= 'flexbox 1 > 

<span class='one box 1 >l</span> 

<span class='two box 1 >2</span> 

<span class=' three box 1 >3</span> 

</div> 

Esse container tera 300px de largura, entao cada um dos elementos ira ocupar 
lOOpx. 

. flexbox { 

/* 

De acordo com a nova especificagao, o valor "flexbox 11 
devera ser substituido por apenas M flex". 

*/ 

display: flexbox; 
height: 60px; 
width: 300px; 

} 

.box { 

color: #FFF; 
display: block; 
flex: auto; 
font-weight: bold; 
height: 30px; 
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line-height: 30px; 
text-align: center; 

> 

Para identificar melhor cada um dos elementos, vamos definir cores de fundo 
diferentes para cada um deles. 

.one { background-color : #8820DD; } 

.two { background-color: #2BB15A; } 

.three { background-color: #755322; } 



Figura 6.22: Tres elementos flexiveis, distribuidos por 30opx de largura. 


Neste exemplo temos duas novidades: o valor flexbox (que sera substituldo por 
flex no futuro), que marca o container como um elemento flexivel, e a propriedade 
flex, onde voce pode definir diversos comportamentos diferentes para o elemento. 

Neste caso, o valor auto define que ele ira ocupar o maximo de espa^o possivel, 
distribuindo os 300 px entre cada um deles. Mas isto pode ser akan^ado utilizando 
porcentagens na propriedade width e flutuando os elementos, certo? 

E aqui que mora a diferen^a entre estes metodos. Como nao estamos definindo 
larguras fixas para os elementos flexiveis, podemos adicionar mais conteudo com 
a classe . box que a largura dos elementos sera ajustada pelo navegador - voce nao 
precisa pular no CSS e recalcular as larguras dos elementos. 

<div class=’ flexbox 1 > 

<span class='one box' >l</span> 

<span class='two box' >2</span> 

<span class =l three box'> 3 </span> 

<span class='four box 1 > 4 </span> 

<span class='five box 1 > 5 </span> 

</div> 

Nao vamos deixar de lado as cores do quarto e quinto elemento: 


.four { background-color: #02A3A3; } 
.five { background-color: #C6363D; } 
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Figura 6.23: Os cinco elementos ocupando os 3O0px do container. 


Nao ter que ajustar as larguras ou definir novas classes e grande vantagem - os 
elementos flexiveis podem ser criados dinamicamente, variando de 3 a io, e a res- 
ponsabilidade de organiza-los e definir os seus tamanhos fica a cargo do navegador. 
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Formularios sao um dos pontos mais criticos da maioria dos sites: alem de serem 
a porta de entrada para seus usuarios e clientes se comunicarem ou proverem in- 
forma^oes para voce, sempre estao relacionados a processos importantes para o seu 
negocio, seja finalizando a compra em um e-commerce, criando artigos para um por¬ 
tal ou enviando novas tbtos para uma rede social. Por isso, devemos criar formula¬ 
rios que nao fiquem no caminho para atrapalhar nossos usuarios em suas tarefas nos 
projetos que criamos. 

7.1 O QUE TEMOS NO HTML 5 

Uma das adi<;6es mais interessantes do HTML5 sao os diversos campos novos para 
formularios e novos comportamentos para enriquecer a experiencia disponivel para 
os formularios. Novos tipos de campos, como email, search e range e atributos 
como placeholder, pattern e required dizem mais sobre que tipo de informa^oes 
nossos formularios precisam e reduz a necessidade de usarmos plugins em JavaScript 
para auxiliar a formata^ao dos elementos. 
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No assunto de novos campos, temos diversos novos valores para o atributo type 
da tag input. Tipos como email, tel, number e url agregam a semantica do seu 
HTML para definir o tipo de informa^ao que o formulario precisa, apesar de nao 
causar mudangas drasticas ao visual dos seus elementos. Os tipos color, range e 
date permitem que o navegador renderize elementos especificos para escolher o va¬ 
lor apropriado para esses tipos de informa^ao. 

Alem disso, diversos novos atributos estao sendo adicionados para melho- 
rar a experiencia dos usuarios ao interagir com os formularios, como o atributo 
placeholder, que exibe um texto especifico quando o campo nao esta preenchido 
- que deve ser usado para exemplificar formatos e expor mais detalhes sobre os 
campos. Para efetuar validates no navegador, os atributos required, maxlength 
e pattern permitem definir quais campos devem ser preenchidos antes do formu¬ 
lario ser enviado de volta para o servidor; E para o campos do tipo file, se pode 
definir que o campo aceita varios arquivos com o atributo multiple e ate restringir 
os tipos de arquivos aceitos atraves do atributo accept. 

Esses diversos novos tipos e atributos estao sendo consolidados e implementados 
aos poucos, entao confira como esta o suporte ao que voce precisa de acordo com 
os navegadores que voce deseja suportar. Por padrao, caso o navegador nao tenha 
suporte a um tipo novo de campo, o elemento sera tratado como um campo de texto 
normal type='text', para garantir o funcionamento basico dos formularios. 

7.2 Formularios HTML 5 nos dispositivos moveis 

Enquanto campos como o email ou url podem parecer desnecessarios ou problema- 
ticos devido a inconsistencias entre navegadores, eles possuem uma funcionalidade 
muito interessante quando usados em navegadores de dispositivos moveis, como ta¬ 
blets ou celulares com iOS ou Android. Os aparelhos apresentam um teclado dife- 
rente ao usuario no momenta de interagir com campos especificos. Para um campo 
com type= 1 number 1 , o teclado ja exibe as teclas de numeros e nao as letras. Para o 
campo de e-mail, o teclado padrao recebe a adi^ao de um botao de arroba (©). E no 
caso de campos com type="url", o iOS gentilmente exibe um botao para se digitar 
‘.com’ com apenas um toque. Apesar de nao ser um padrao definido entre os fabri¬ 
cates, essas mudan^as sao muito uteis para os usuarios - lembre-se de tirar proveito 
desses campos para facilitar a vida dos seus usuarios que usam tais dispositivos. 
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THE CURRENT STATE OP HTML? FORMS 
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Figura 7.1: Exemplos do teclado numerico do iOS 5 e Android 4 


REFERENCIAS DE QUEM VIVE DO ASSUNTO 

O Wufoo e um site que permite criar formularios sem precisar entender ou 
escrever HTML ou CSS e voce consegue usa-los em outros sites para receber 
mensagens de contato, criar pesquisas e ate receber pagamentos. Com o foco 
constante em melhorar seus formularios e prover diversas funcionalidades 
em cima deles. 

Os desenvolvedores do Wufoo criaram uma otima referenda para os no- 
vos tipos de campos e as novas funcionalidades de formularios presentes no 
HTML5. Acesse http://wufoo.com/html5/ para saber mais sobre compatibi- 
lidade de navegadores, exemplos de codigo e mais. 


7.3 Cria^ao do primeiro formulario 

Vamos comec^ar com um exemplo basico porem bem refinado de um formulario: 
uma pagina de contato contendo campos para e-mail, assunto e mensagem. Esse 
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formulario tera dicas explicando como a informa^ao deve ser preenchida em cada 
campo. Alem disso, iremos preparar elementos para notificar os usuarios caso haja 
problemas de valida<jao no formulario - um passo que sempre deve ser levado em 
considera^ao ao criar paginas como essa. 


E-mail; pwreaemplo. seunome@dominio.com. 

Preencha o sav e-mail conetamanJe. 


Assunto: 
Men sagem: 


Enviarmensagem 


Figura 7.2: O formulario que vamos criar a seguir 


Marca^ao basica 

Vamos come^ar com a tag form, o campo de e-mail e um botao de envio: 

<form method= 'post 1 action=' '> 

<label for= 1 email 1 >E-mail :</label> 

<input type=' email 1 id=' email' name= 1 email ’> 

<button>Enviar mensagem</button> 

</form> 

Nosso formulario esta com o method definido como post, ja que pretendemos 
criar uma mensagem de contato no site. Com o valor do atributo action com o 
valor vazio, o navegador ira enviar os dados do formulario para o mesmo endere^o 
da pagina atual: se estamos em http://meusite/contato, ao clicar no botao de envio 
os dados irao para o mesmo http://meusite/contato atraves do metodo post. 

Para separar o campo e botao de envio, vamos colocar os elementos do formu¬ 
lario dentro de paragrafos com a tag p. 

<p> 

<label for= ' email* >E-mail :</label> 
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<input type= 1 email 1 id= 'email' name= 1 email 1 > 

</p> 

No mesmo modelo, podemos adicionar os outros campos do formulario - um 
campo de texto para o assunto da mensagem e uma caixa de texto para o corpo da 
mensagem: 

<p> 

<label for= 'subject 1 >Assunto: </label> 

<input type='text' id— 'subject r > 

</p> 

<p> 

<label for= 1 content '>Mensagem:</label> 

<textarea id= 1 content 1 ></textarea> 

</p> 


E-mail: 


Assunto; 


Mensagem: 


.a 


Enviar mensagem 


Figura 7.3: Os campos do formulario 


Com a estrutura basica e os campos necessarios do nosso formulario, podemos 
passar para o proximo passo e adicionar regras de estilo para o nosso formulario. 


7.4 Alinhamento e estilos visuais nos campos e for¬ 
mularios 

Vamos come^ar alinhando todos as caixas de texto na mesma posi^ao. Para isso, 
precisamos fixar a mesma largura de cada label, e vamos aproveitar para deixa-los 
com o texto em negrito: 

label { 

display: inline-block; 
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font-size: 0.9em; 
font-weight: bold; 
width: 90px; 

} 


Definindo apropriedade display como inline-block, podemos fixar a largura 
e manter os campos ao lado dos labels, utilizando apenas block os campos ficariam 
abaixo do seu respectivo label, independente da largura definida. Podemos fazer o 
mesmo para as tags input e text area para manter todos os elementos devidamente 
alinhados. 

input, textarea { 

display: inline-block; 
width: 200px; 

> 


Alem da largura, vamos fixar tambem a altura da textarea, garantido um bom 
espa^o para se digitar um texto comprido. 

textarea { 

height: lOOpx; 

> 



Enviarmensagem 


Figura 7.4: Os campos e labels devidamente alinhados com CSS. 


Hora de melhorar a aparencia dos campos do formulario: vamos trocar as bordas 
padroes dos campos, adicionar uma sombra e espa^amento interno e reduzir um 
pouco a fonte: 
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input , text are a { 

border: lpx solid #CCC; 
box-shadow: inset 2px 2px 2px #EEE; 
font-size: 0.9em; 
padding : 2px 5px; 

> 


E-mail: 

Assunto: 

Mensagem: 

I_ A 

Enviar mensagem 


Figura 7.5: Os campos com as mudanqas de estilo que criamos. 


Pronto, alterando pequenos detalhes do estilo padrao dos elementos consegui- 
mos chegar a um visual sutil porem bastante agradavel. Para compor a sombra, usa- 
mos a opqao inset, que define que a sombra sera exibida dentro do elemento e nao 
fora dele. A sombra nao sera exibida em navegadores que nao possuem suporte a 
box-shadow, mas isso nao impedira ou complicara o uso do formulario, garantido 
sua funcionalidade em navegadores sem suporte a essas propriedades do CSS 3, como 
versoes antigas do Mozilla Firefcx e do Internet Explorer. 

7.5 EXIBI^AO DE MENSAGENS DE AJUDA 

Agora que temos os campos devidamente estilizados, podemos adicionar um novo 
elemento para mostrar uma descri^ao dos campos, para que auxilie as pessoas que 
forem preencher o formulario - mensagens de ajuda, que podem explicar a respeito 
de limite de caracteres, formates especificos e detalhes extras a respeito do seu for¬ 
mulario. Para representar essas mensagens, usaremos a tag span com a classe hint. 

<p> 

<label for= ' email ' >E-mail: </label> 
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<input type=' email 1 id=' email' name= 'email' > 

<span class= 'hint 1 >por exemplo, seunome@dominio. com.</span> 

</p> 

<p> 

<label f or= 1 subj ect 1 >Assunto: </label> 

<inpu.t type= ' text T id= 1 subj ect' > 

<span class= 'hint 1 >Nos diga qual e o seu problema ou. ideia.</span> 
</p> 

<p> 

<label for= 'content 1 >Mensagem: </label> 

<textarea id= 'content 1 ></textarea> 

<span class= ’hint 1 > 

Escreva a sua mensagem, em ate 500 caracteres. 

</span> 

</p> 

Agora, precisamos adicionar um estilo a essas mensagens para elas se destacarem 
na interface, chamando a atencao dos usuarios. 

.hint { 

background-color : #FFFBE4; 

border-radius: 3px; 

border: lpx solid #CCC; 

box-shadow: lpx lpx 3px rgba(0,0,0,0.2); 

display: inline-block; 

font-size: 0.8em; 

margin-left: 20px; 

padding: 3px; 

> 


Um tom de amarelo como fundo, bordaslevemente arredondadas (usando a pro- 
priedade border-radius) e uma sombra (com a utiliza^ao de rgba em vez de uma 
cor solida, reduzindo bastante a opacidade da cor preta). Alem disso, uma margem 
de 20px para distanciar um pouco as mensagens dos seus campos. 
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E-mail: por exempio, seunome@domiriio,com. 

Assunto: Nos diga qual e 0 seu problems 00 ideia. 

Mensagem: Esc rev a a sua mensagem em ate 500 caracleres. 


Enviar mensagem 


Figura 7.6: Todas as mensagens de ajuda junto dos campos. 


De certa forma, exibir todas essas mensagens ao mesmo tempo pode atrair aten- 
i^ao denials e atrapalhar o fluxo de uso do formulario. For que nao exibir as mensa¬ 
gens conforme o formulario for preenchido? Isto e possivel usando apenas CSS! 

Primeiro, vamos esconder todas as mensagens alterando a propriedade display 
de inline-block para none. Com todas elas escondidas, vamos exibir apenas a men- 
sagem relaeionada ao campo que esteja em foco - ao selecionar o campo de “E-mail”, 
por exempio, a mensagem de ajuda para este campo sera exibida, quando se passar 
para o proximo campo, “Assunto”, a mensagem do campo de “E-mail” desaparece 
novamente e a mensagem para o campo de “Assunto” e exibida. 

Para isso utilizaremos o seletor de sibling (irmao, no caso), usando o simbolo de 
adi^ao +: 

.hint { 

display: none; 

> 

input: focus + .hint, textarea: focus + .hint { 
display: inline-block; 

> 


O seletor pode ser lido como “um elemento com a classe hint, posicionado exa- 
tamente depois de um elemento input (ou textarea) que esteja em foco no na¬ 
ve gador”. Assim, as mensagens se tornarao visiveis (tendo a propriedade display 
sobrescrita de none para inline-block) conforme os campos recebem e perdem o 
foco. 
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E-mail: 

Ass unto: | Nos dig a qual e o seu problems mi ideia, 

Men sagem: 

I_ A 

Enviar mensagem 


Figura 7.7: Agora, somente uma mensagem e exibida por vez. 


Mas e o atributo “placeholder"? 

O atributo placeholder foi originalmente criado para exibir frases de ajuda 
e exemplos de formatos dentro dos proprios campos criados com a tag 
input, mas com ele nao possuimos tanta flexibilidade para mudan^as de es- 
tilo e uma melhor intera^ao com os usuarios - no nosso exemplo podemos 
ate adicionar links para paginas de ajuda mais completas e utilizar outros 
formas de estilo - como palavras em negrito ou em outras cores - para real¬ 
gar a mensagem a ser exibida. 


7.6 Mostre mensagens de erro 

Com nossas mensagens de ajuda em posi^ao, temos um outro tipo de mensagem 
a exibir no formulario: mensagens de erros e de validates. Nao pretendo entrar 
em detalhes em como tais validates devem ser feitas (seja utilizando JavaScript no 
navegador ou processando isso com a sua linguagem de programa^ao preferida como 
Ruby, Python ou Java em um servidor externo), mas sempre devemos guardar um 
espa^o para tais mensagens e definir um estilo especifico para elas. 

Vamos simular que o formulario foi enviado sem o campo “E-mail” e devemos 
notificar o usuario disso. Co me pantos com um elemento span com a classe error, 
para identihear exatamente quais elementos span estao exibindo tais mensagens. 

<p> 

<label for= 1 email 1 >E-mail :</label> 
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<input type= 1 email 1 id= 'email' > 

<span class= 'hint 1 >por exemplo, seunome@dominio. com.</span> 
<span class= 1 error 1 >Preencha o seu e-mail corretamente. </span> 
</p> 

Vamos posicionar a mensagem exatamente abaixo do input. 

.error { 
color: red; 
display: block; 
font-size: Q.8em; 
font-style: italic; 
margin: 5 px 0 0 90 px; 


E-mail: 


por exemplo, seunofne@dominio.com. 

Presncha o swj 6 ftt tf Gamtamante. 


Awufito: 

Mensagem: 

_ & 

Envi a r mensagem 


Figura 7.8: A mensagem de erro abaixo do campo de E-mail. 


O valor block na propriedade display vai garantir que o elemento fique abaixo 
dos demais, do label, input e o outro span. Os valores de margem posicionam este 
span abaixo da caixa de texto, com 5 px de distancia entre eles. A cor vermelha e o 
texto em italico (gramas ao font-style), garantem um certo destaque em rela^ao ao 
outros elementos que estao em tons de preto e cinza. 

Agora basta replicar o mesmo exemplo para os outros campos do formulario - 
“Assunto” e “Mensagem”, garantindo o espat^o reservado para suas mensagens de erro 
de validates! 

Dessa maneira, bastaria que quando a valida^ao fosse feita, seja no lado do ser- 
vidor ou no lado do diente, houvesse uma regra para deixar esse novo span vislvel 
quando acontece o erro de validacao. 
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7.7 Levando o usuario direto ao que importa com o 

AUTOFOCUS 

Podemos adidonar mais um truque ao formulario: o autofocus. Ao carregar a pa¬ 
gina, o cursor ira focar o campo de “E-mail” para facilitar o trabalho dos usuarios que 
querem utilizar o formulario. A implementa^ao e bem simples, bastando adidonar 
um atributo ao campo: 

<input type= 'email 1 id= 1 email' autofocus> 

Sim, apenas autofocus. Nao precisamos adicionar nenhum valor ao atributo 
para ativa-lo. Dessa forma o campo de “E-mail” recebera o foco da janela e a men- 
sagem de ajuda tambem aparecera ao carregar a pagina do formulario. 

Apenas alguns pontos importantes que se deve prestar aten^ao ao usar este atri¬ 
buto: caso voce tenha mais de um campo com autofocus, eventualmente o ultimo 
campo presente no HTML recebera o foco. E caso seja necessario descer a barra de 
rolagem da janela para chegar ao campo, o navegador ira descer a pagina para exibir 
o campo focado, pulando qualquer conteudo anterior ao formulario. Com exce^ao 
de navegadores em dispositivos moveis (como o Mobile Safari do iOS 5 e o navega¬ 
dor do Android 2.3), todos as ultimas versdes dos navegadores de desktop possuem 
suporte ao autofocus. 

7.8 A FLEXIBILIDADE DO ATRIBUTO PLACEHOLDER 

Comentei a respeito do atributo placeholder e como utiUzamos meros elementos 
para substituir o que este atributo foi criado para fazer. Agora vamos inverter o cena- 
rio - utilizaremos o placeholder de campos do formulario para, visualmente, subs¬ 
tituir o seu label - essa abordagem pode ser util para formularios menores e simples, 
quando se precisa economizar alguns pixels da sua pagina. 

O HTML 

O HTML para este formulario e bastante simples - nao vamos precisar de pa- 
ragrafos para cada campo, mas vamos ter o label de cada campo presente, mesmo 
considerando que nao vamos exibir eles na interface final: 

<f orm method= 'post' action= 1 ' > 

<label f or= 'username 1 >Usuario</label> 
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<input type='text' id= 'username' > 

<label for= 'password 1 >Senha</label> 

<input type= 'password' id= 'password' > 

<button>Entrar no site</button> 

</form> 

Existem duas razoes para termos o label do campo de “Usuario” e de “Senha": 
primeiro, precisamos disponibilizar tais elementos para auxiliar leitores de telas para 
deficientes visuais a navegarem pela nossa pagina. E segundo, caso o navegador que 
for utilizado para acessar a pagina nao carregue todo o nosso CSS ou nao possua 
suporte ao atributo placeholder, o formulario ainda sera funcional para quem o 
utilizar. 

Com isso esclarecido, vamos continuar e adicionar os textos para o placeholder 
de cada campo. 

<form method='post 1 action=' ' > 

<label for= 'username 1 >Usuario</label> 

<input type='text' id- 'username' placeholder= 'Usuario 1 > 

<label for= ' password' >Senha</label> 

<input type= 'password 1 id= 'password' placeholder= 'Senha 1 > 
<button>Entrar no site</button> 

</form> 

Com os textos em posi^ao, vamos ao CSS. 

Aplicando o CSS necessario 

Nosso primeiro passo aplicando o CSS neste formulario sera esconder o label 
de cada campo e empilhar o campo de “Usuario” junto ao de “Senha” empurrando 
o botao para baixo: 

label { 

display: none; 

> 

input { 

display: block; 

> 

button { 

margin-top: 5px; 

> 
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Usu4no 

Senha 

Enlrar no site 


Figura 7.9: Os campos com o atributo placeholder’. 


E com um pouco mais de codigo, embelezamos o formulario com bordas e som- 
bras. 

input { 

border -radius: 3px 3px 0 0; 

border: lpx solid #999; 

box-shadow: lpx lpx 5px rgba(0,0,0,0.2); 

font-size: 0.8em; 

padding: 5px; 

} 

input [type= 'password' ] { 
border-radius: 0 0 3px 3px; 
border-top: none; 

} 


Usuoric 


Senha 


Enlrar no site 


Figura 7.10: Nosso formulario um pouco mais apresentavel. 


Bastante simples, certo? Arredondamos apenas os cantos superiores (deixando 
os dois ultimos valores do border-radius com o valor 0), aplicamos uma borda 
cinza e uma leve sombra utilizando rgba. E para o campo de “Senha”, invertemos os 
valores do border-radius. 
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Podemos alterar o estilo do texto dos campos, mas o mesmo nao e aplicado ao 
texto exibido do placeholder. Para isso, precisamos utilizar um pseudo-seletor es- 
perifico para este texto. Devido a problemas de compatibilidades, navegadores di- 
ferentes dao um nome diferente para o mesmo seletor, entao predsamos especificar 
todos eles, assim: 

::-webkit-input-placeholder { 
color: red; 

> 

::-moz-placeholder { 
color: red; 

> 

-ms-input-placeholder { 
color: red; 

> 


Uauario 


Senria 


Ervlrar no site 


Figura 7.11: Aplicando o pseudo-seletor para placeholders. 


O -webkit-input-placeholder e direcionado para os navegadores baseados 
no WebKit - como Safari e o Google Chrome. Os demais, -moz-placeholder e 
-ms-input-placeholder, atendem o Mozilla Firefox e o Internet Explorer io, res- 
pectivamente. Cada navegador processara um seletor diferente, e precisamos repetir 
as propriedades entre eles. 

Apesar da repeti^ao, ganhamos total controle sobre o estilo do placeholder - po¬ 
demos alterar cores, tamanhos e fundos. Por exemplo, podemos deixar o texto digi- 
tado no campo em negrito e o texto do placeholder em italico e cinza, ajudando a 
diferenciar entre um campo preenchido e um campo em branco. 

input -[ 

font-weight: bold; 
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} 


::-webkit-input-placeholder { 
color: #666; 
font-style: italic; 
font-weight: normal; 


:-moz-placeholder { 
color: #666; 
font-style: italic; 
font-weight: normal; 

} 

-ms-input-placeholder { 
color: #666; 
font-style: italic; 
font-weight: normal; 

> 


Luca a 




Ehlrar no site 


Figura 7.12: A versao final dos campos do formulario. 


O formulario esta completo - com o placeholder em uso e o label de cada 
campo escondido - apenas visualmente, utilizando CSS - deixando o formulario ocu- 
par um espa^o minimo. 

Temos apenas um ponto, opcional, a melhorar: em navegadores que nao supor- 
tam o uso de placeholder - como versoes do Internet Explorer anteriores a 10 - 
nosso formulario nao exibe apenas os 2 campos, sem texto algum indicando sobre o 
que eles sao. 

A seguir, vamos adotar uma estrategia para identificar os casos onde nao se tem 
suporte ao atributo e ainda sim podemos permitir que os usuarios utilizando tais 
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navegadores consigam usar o formulario normalmente* 

Detectando funcionalidades com JavaScript e ajustando o estilo 

Para identificar que o navegador em uso nao possui suporte ao placeholder 
vamos utilizar um pouco de JavaScript, mas, em vez de tentar identificar em qual 
navegador estamos fazendo malabarismos com o navigator .userAgent, sera mais 
seguro testar se o navegador possui realmente suporte a funcionalidade que pre- 
cisamos. Eis o por que: podemos escrever um codigo especifico para atender o 
Internet Explorer, mas isso nao atingira versoes antigas do Mozilla Firefox, por 
exemplo. Detectando a funcionalidade em vez que possuir uma lista de versoes 
de navegadores que precisam de uma correcao garante um codigo mais simples 
e conciso. 

Vamos escrever um teste especifico para o atributo placeholder e caso voce pre¬ 
cise testar outras funcionalidades que possam nao existir talvez sera necessario usar 
alguma outra logica especifica. A bibIioteca |io.4| Modernizr foi criada para agrupar 
diversos testes de funcionalidades diferentes para facilitar a nossa vida. Mas neste 
caso vamos escrever o codigo nos mesmos, por ser um teste tao simples. 

function supportsPlaceholder 0 { 

return 'placeholder* in document .ereateElement(' input 1 ) fck 
'placeholder* in document .createElement( 'textarea' ); 

> 

A fun^ao e bem simples: caso a propriedade placeholder exista nos elemen- 
tos input e textarea, ela retornara true. Caso algum dos elementos (ou ambos) 
nao possua o atributo, ela retornara false. O teste nao servira de nada se nao o 
utilizarmos, certo? Vamos fazer o seguinte: caso o navegador nao passe no teste (re- 
tornando false a chamada desta fun^ao), vamos adicionar uma classe ao elemento 
html (o elemento raiz da pagina) para, atraves do CSS, aplicarmos um estilo diferente 
para navegadores sem suporte ao placeholder. Utilizando o jQuery, biblioteca mais 
usada para trabalhar com o DOM, ftcamos com o seguinte codigo: 

jQuery(function($) { 

function supportsPlaceholder() { 

return 'placeholder* in document .ereateElement(* input 1 ) 

'placeholder' in document. createElement( 'textarea' ); 

> 
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if (!support sPlaceholder()) { 

$( 'html' ) .addClass( 1 no-placeholder 1 ); 

} 

»; 


Assim, o nosso CSS podera aplicar regras espedficas para paginas com a classe 
no-placeholder . Neste caso podemos exibir o label de cada campo e fazer outras 
mudan^as no estilo do formulario. 

.no-placeholder input { 
border-radius: 3px; 
border-top: lpx solid #999; 

> 

.no-placeholder label { 
display: block; 

> 


Usua.fi o 



Figura 7.13: Como formulario sera visualizado em navegadores sem suporte. 


Assim, o formulario se mantem funcional quando o navegador usado nao tiver 
suporte ao que precisamos e os navegadores atuais terao o comportamento padrao 
que desenvolvemos anteriormente. 


7.9 Aplicando CSS3 em botoes 

Talvez voce tenha reparado nos exemplos anteriores que nao chegamos a trabalhar 
o estilo dos botoes dos formularios. Deixei o assunto para ser tratado em separado 
por considera-lo uma arte a parte. 

Nos capitulos anteriores entramos em detalhes sobre gradientes, sombras e bor- 
das, que sao utilizados em conjunto para aprimorar o visual de botoes e links sem a 
necessidade de se usar imagens para isso. 
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Criando um botao completo 

De volta ao formulario de contato que criamos anteriormente e utilizando o que 
aprendemos sobre gradientes e bordas arredondadas, vamos comecpar com um sutil 
botao branco: 

button { 

background-color: #E5E5E5; 

background-image: linear-gradient (top, #FFF, #E5E5E5); 

border: lpx solid #AAA; 

border-radius: 3px; 

color: #000; 

font-size: 0.8em; 

font-weight: bold; 

padding: 5px lOpx; 

> 


Definimos um gradiente usando branco (#FFF) e cinza (E5E5E5), deixando o 
cinza como cor de fundo caso nao exista suporte a gradientes. Uma borda um pouco 
mais escura que o cinza do gradiente, levemente arredondada e alguns toques de ta- 
manho de fonte e espa^amento para chegar ao seguinte resultado: 


Eriviar mensagem 


Figura 7.14: O botao com gradiente e bordas. 


Simples, nao? E importante nao usar cores muito diferentes no gradiente ou 
deixar o botao grande demais para chamar mais aten^ao que os demais elementos 
do formulario. Mas ainda temos trabalho a fazer neste botao! 

Para ficar mais elegante, podemos adicionar estilos para os estados de uso do 
botao, usando pseudo seletores como o : hover e : active, para garantir a resposta 
visual a intera^ao com o formulario. Vamos come^ar pelo : hover, alterando as cores 
do botao. 

button: hover { 

background-color: #285582; 

background-image: linear-gradient (top, #3775B3, #285582); 
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border-color : #204569; 

> 


Eriviai rrtens&tj&rn 


Figura 7.15: Ao posicionar o mouse em cima do botao, ele muda do branco e cinza 
para o azuL 


Do branco sutil ao azul. Devido a essa inversao brusca, a cor do texto do botao 
precisa ser mudada tambem, assim: 

button: hover { 

background-color : #285582; 

background-image: linear-gradient (top, #377583, #285582); 
border-color: #204569; 
color: #FFF; 

text-shadow: -Ipx -lpx 0 rgba(0, 0, 0, 0.6); 

} 



Figura 7.16: Bern melhor a cor branca no botao azul, nao acha? 


Alem de mudar a cor para branco, adicionamos uma sombra no texto para ajudar 
na leitura - geralmente nao precisamos usar mais do que 1 ou 2 pixels quando se trata 
de text-shadow, basta ajustar qual o angulo desejado. O uso do rgba aqui pode ser 
trocado pela cor solida - #000 - se quiser. Por ultimo, fechamos com estilo do botao 
com um par de sombras: 

button: hover { 

background-color : #285582; 

background-image: linear-gradient (top, #3775B3, #285582); 
border-color: #204569; 

box-shadow: inset 0 lpx 0 rgba(255, 255, 255, 0.3), 0 0 3px #3775B3; 
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color: #FFF; 

text-shadow: -lpx -lpx 0 rgba(0, 0, 0, 0.6); 


Eiwlar mensag^n 


Figura 7.17: O estado de ’hover’ finalizado com as sombras. 


A propriedade box-shadow contem duas sombras bastante distintas - a primeira 
e uma sombra interna (atente-se ao inset) para clarear utn pouco o topo do botao. 
A segunda, em volta do eiemento, para demonstrar um certo brilho ao seu redor. 

Agora, para o estado : active, vamos escureeer bastante o botao, dando a ilusao 
do eiemento estar realmente pressionado pelo mouse. 

button: active { 

background-color : #204569; 
background-image: none; 
border-color: #1A3754; 

box-shadow: inset 0 2px lpx rgba(0,0,0, 0,15); 

> 

Trocamos o par de sombras por uma sombra escura interna, removemos o gra- 
diente azul do botao e escurecemos as cores das bordas e dos fundos. 


Erwlar menflag^n 


Figura 7.18: O estilo do botao quando pressionado. 


Pronto, temos os 3 principais estados do nosso botao devidamente estilizados 
combinando as propriedades de gradiente e sombras. E muito facil ajustar os tons 
para alguma outra cor, como um vermelho ou verde - simplesmente alterando os 
hexadecimais usados no codigo. 


143 






7.9. Aplicando CSS3 era botoes 


Casa do Codigo 


Regras basicas para definir estados de botoes 

E muito comum ver pela internet diversos sites que aplicam as mais diversas 
mu da as em estilos para : hover e : active, e nem sempre o resultado e agradavel. 
Tyler Galpin, um designer canadense, sugere no seu blog tres regras basicas para 
esses casos, cabendo a cada um escolher qual das tres seguir. 

Para o caso de : hover: 

1) O botao deve ficar mais claro; 

2) O botao deve ficar mais escuro; 

3) O botao deve mudar de cor. 

E o estado de : active: 

1) O botao deve se mover 1 ou 2 pixels para baixo; 

2) O botao deve ter o seu gradiente (caso presente) invertido; 

3) O botao deve ficar ainda mais escuro. 

No exemplo anterior escolhi a terceira op$ao de cada um, mas voce pode praticar 
e ver os resultados ao usar alguma das outras regras sugeridas. Em seu blog, Tyler 
tambem comenta sobre o que se deve evitar nestes casos e outras dicas importantes 
sobre botoes - http://galp.in/bl0g/2011/08/02/the-ui-guide-part-1-butt0ns/ 


Reaplicando padroes em outros cenarios 

No formulario de login que criamos anteriormente, podemos usar as mesmas 
tecnicas do botao anterior para criar um botao verde bastante arredondado. Vamos 
come^ar com CSS simples, sem utilizar gradientes ou sombras. 

button { 

background-color : #6DA033; 
border: lpx solid #588129; 
color: white; 
font-size: 0.8em; 
font-weight: bold; 
padding: 5px lOpx; 

> 
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Entrar no alto 


Figura 7.19: Um simples botao com fundo e bordas verdes. 


Agora, deixamos o botao um pouco mais interessante com border-radius, 
text-shadow e box-shadow. 

button { 

background-color : #6DA033; 
border-radius: 13px; 
border: lpx solid #588129; 

box-shadow: inset 0 lpx 0 rgba(255, 255, 255, 0.4); 

color: white; 

font-size: 0.8em; 

font-weight: bold; 

padding: 5px lOpx; 

text-shadow: -lpx -lpx 0 rgba(0, 0, 0, 0.6); 

> 


Figura 7.20: Melhorando o botao verde. 


O valor de 13 px para o border-radius e por que o botao tern 27 px de altura 
- entao usamos aproximadamente metade desse valor. Nao podemos utilizar 50 % 
por que esse valor iria levar em considera^ao a largura do elemento, fazendo que 
ele tomasse a forma de uma elipse. As sombras sao para realgar o texto (com o 
text-shadow preto acima do texto branco) e a borda superior. Agora, e a vez do 
gradiente. 

button { 

background-color : #6DA033; 

background-image: linear-gradient (bottom, #6DA033 47'/,, #87C442 55%); 
border-radius: 13px; 
border: lpx solid #588129; 
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box-shadow: inset 0 lpx 0 rgba(255, 255, 255, 0.4); 

color: white; 

font-size: 0.8em; 

font-weight: bold; 

padding: 5px lOpx; 

text-shadow: -lpx -lpx 0 rgba(0, 0, 0, 0.6); 


Entrnr no alto 


Figura 7.21: Nosso botao verde com um gradiente. 


Diferente do gradiente anterior, agora vamos informar as posicoes das cores - 
47'/, e 557, • O primeiro tom de verde se mantem ate 477, da altura do gradiente, e 
o segundo tom come^a a partir dos 557, . O espa^o entre eles - os 87, restantes - 
sao preenchidos com a transi^ao de uma cor para outra. Para a versao de : hover do 
botao, seguindo as indicates comentadas anteriormente, vamos escurecer 10% das 
cores do gradiente e das bordas do botao. 

button: hover { 

background-color : #618F2D; 

background-image: linear-gradient (bottom, #618F2D 477,, #79B238 557,); 
border-color: #4E7324; 

} 



Figura 7.22: O estado de ’hover 1 para o botao verde. 


E o : active? Podemos reutilizar a tecnica para escurecer bastante o botao que 
usamos anteriormente, apenas ajustando as cores para o verde que esta sendo apli- 
cado agora. 

button: active { 

background-color : #618F2D; 
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background-image: none; 
border-color: #405E1E; 

box-shadow: inset 0 2px Ipx rgba(0,0,0, 0.15); 

> 



Figura 7.23: Escurecendo o botao verde utilizando o ’box-shadow’ 


E...pronto! Os mesmos padroes, mas aplicados com cores diferentes e leves mu- 
dan^as de estilo, levam a elementos agradaveis e funcionais. Apesar de usarmos 
bastante CSS 3 aqui, os botoes degradam muito bem em navegadores que possam 
nao ter suporte a sombras ou gradientes. Isso se deve principalmente a presen^a do 
background-color e do padding usado para manter o tamanho dos botoes. 
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Capitulo 8 

Efeitos 101: Trabalhando com 
animates e transiqoes 


Uma das minhas partes favoritas do CSS 3 sao a quantidade de efeitos que consegui- 
mos criar apenas com CSS nas nossas paginas combinando algumas propriedades 
novas - transform, transition e animation. Sem eles, todos esses efeitos e anima¬ 
tes de encher os olhos costumam ser feitos por bibliotecas de JavaScript como o 
jQuery ou o script.aculo.us. Alem dessa dependencia adicional, problemas de per¬ 
formance e de renderizacao de elementos costumam surgir em navegadores antigos 
ou ao trabalhar com elementos complexos. Passando a responsabilidade de todo o 
trabalho pesado para os navegadores, conseguimos efeitos de maior qualidade com 
uma taxa menor de bugs. 

Apesar do suporte experimental, pois no momento todos essas 3 propriedades 
precisam ser usadas com prefixos espedficos para cada os navegadores que os supor- 
tam, diversos sites e aplicativos usam esses recursos para efeitos sensacionais, sendo 
alguns deles os sites do ultimo modelo do iPhone e do Google Nexus e a interface 
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web do Twitter. Nao existe ha razao de ter medo ou receio em usar eles em seus 
projetos. Vamos repassar exemplos classicos de usos para a propriedade transform, 
como adidonar transudes entre propriedades em elementos existentes, o nivel de 
refinamento que temos em animates e como executar transform a^oes em 3 dimen - 
soes. 


8.1 Transformando elementos 

Vamos come^ar com transforma^oes em duas dimensoes. A propriedade transform 
aceita diversas fun^oes de efeitos diferentes definidos pela especifica^ao da W3C, tais 
como: 

1) translate: utilizado para reposicionar um elemento, movendo sua posi^ao no eixo 
X e Y pelos valores informados. 

2) scale: utilizada para redimensionar um elemento, aceitando valores referentes ao 
tamanho do elemento - scale (2) dobrara o tamanho de um elemento. 

3) skew: permite distorcer as posi^oes de um elemento, esticando e torcendo de 
acordo com os valores passados. 

4) rotate: usada para rotacionar o angulo dos elementos. 

5) matrix: o mais complexo de todos, permite executar uma matriz de trans forma¬ 
tes. 

As fun^oes translate, scale e skew possuem versoes X e Y, que permitem mo- 
dificar apenas um eixo e nao ambos de uma vez. As fun^oes de skew e rotate traba- 
lham com uma nova medida, graus, utilizando o sufixo deg, como em transform: 
rotate (90deg). 

A melhor forma de compreender o uso de tais fun^oes e na praticas. Vamos 
utilizar algumas delas no exemplo a seguir. 

8.2 Os EFEITOS ROTATE, SCALE, SKEW E TRANSLATE EM 
UMA GALERIA DE FOTOS 

No comedo de 2012, a Plataformatec contratou 4 desenvolvedores - incluindo eu - 
para refor^ar a sua equipe. Em homenagem a isso, vamos criar uma galeria de fotos 
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para apresentar os novos membros do time. Come^ando com um HTML com a lista 
de contratados e suas fotos: 

<hl>Reforgos da Plataformatec em 2012</hl> 

<ul> 

<li> 

<img src='pics/galdino.png' alt^ 1 Carlos Galdino’> 

<span>Carlos Galdino</span> 

</li> 

<li> 

<img src='pics/erich.png' alt =l Erich Kist’> 

<span>Erich Kist</span> 

</li> 

<li> 

<img src= 'pics/lucas.png’ alt=' Lucas Mazza'> 

<span>Lucas Mazza</span> 

</li> 

<li> 

<img src=’pics/rondy.png' alt='Rondy Sousa 1 > 

<span>Rondy Sousa</span> 

</li> 

</ul> 

E um pouco de CSS para alinhar as fotos e realgar os nomes: 
ul { 

list-style: none; 
padding: 0; 

> 

li { 

float: left; 
margin-left: lOpx; 
position: relative; 

> 

span { 

color: #153755; 
display: block; 
font-weight: bold; 
margin-top: 5px; 
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text-align: center; 

> 


Refor?os da Plataformatec em 2012 


*JL 

Carlos GaIdino Erich Kist Lucas Maiza Rondy Sousa 




Figura 8.i: A galeria com as 4 fotos no lugar, 


Para dar uma descontraida na galeria } vamos girar as fotos utilizando a furn^ao 
rotate. Sendo que as fotos impares (do Carlos e a minha) irao para um lado e as 
pares (do Erich e do Rondy) para outro. Utilizando o seletor de nth-child, o codigo 
para isso fica bem enxuto: 

li :nth-child (even) { 

transform: rotate( 5 deg); 

} 

li :nth-child (odd) { 

transform: rotate(- 5 deg); 

> 


152 








Casa do Codigo 


Capitulo S r Efeitos 101: Trabalhando com an imagoes e transi^oes 


Reforgos da Plataformatec em 2012 



Carlos GaWino Erich Kist Lucas *ondjr Sousa 


Figura 8.2: A fun^ao ’rotate’ em a$ao, aplicada nas fotos. 


Passando uni valor negative podemos rotacionar as imagens no sentido anti- 
horario, enquanto valores positivos sao para o sentido horario. Outro efeito que 
conseguimos adicionar facilmente e ao passar com o cursor por cima das fotos, au- 
mentar o tamanho da imagem e do texto, atraves do uso do scale. 

li: hover { 

transform: scaled.3); 
z-index: 1; 

> 


Reforgos da Plataformatec em 2012 



Lucas Mazza 

Figura 8.3: Combinando o ’hover’ com o ’scale’. 


Desta forma, a img e o span irao voltar a posi^ao normal e ficarao 30% maiores 
- e o uso do z-index vai posicionar a foto em cima das demais. Podemos testar 
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outras funcoes como o skew e o translate aqui, mas elas nao sao aplica^oes tao 
interessantes quanto o rotate e o scale no nosso cenario. Mas vamos conferir como 
elas ficariam na nossa galeria. 

li { 

transform: skew(10deg, lOdeg); 

> 


Reforpos da Plataformatec em 2012 



Figura 84: Talvez o ’skew’ nao seja o mais interessante para o nosso caso. 


li :nth-child (even) { 

transform: translateY(lOpx); 

} 

li :nth-child (odd) { 

transform: translateY(-lOpx); 

} 
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Reforgos da Plataformatec em 2012 



Carlas Galdina 


Lucas Mazza 


Rondy Sousa 


Erich Kist 


Figura 8.5: Movimente os elementos com a fun<~ao ’translate’. 


Em cada caso e necessario estudar qual o melhor efeito a ser usado. O skew pode 
ser util para desenhar cubos em 3D utilizando 3 elementos, e o translate e uma 
otima alternativa ao uso de position: absolute junto de top e left. 

Em navegadores sem suporte a transform, a galeria seria exibida da forma que 
ela foi criada inicialmente - sem efeitos nenhum. Caso voce precise trabalhar com 
navegadores sem suporte, sempre teste as suas paginas sem os efeitos de transform 
para confirmar que elas continuam funcionais. 

8.3 Transi^oes de estilos 

A propriedade transitionpermite voce “animar” a mudan^a - ou seja, a transi^ao - 
entre outras propriedades dos seus elementos quando elas mudam de valor. Seja esta 
mudan^a feita atraves de JavaScript, alterando as classes aplicadas a um elemento, ou 
pelas mudanqas causadas por pseudo seletores, como : focus e : hover. 

Transudes sao uma otima adi^ao a interfaces ja existentes, ja que dependem da 
mudan^a de estado existente, como containers deslizantes e modais que aparecem 
e desaparecem das telas. Se voce esta acostumado a usar an imagoes em JavaScript 
com o jQuery, por exemplo, e possivel substituir o uso de fun^oes como slideDown 
e fadeToggle por transiqoes entre classes espedficas para modificar a altura ou a 
opacidade, tornando esses efeitos mais rapidos e garantido melhor qualidade aos 
efeitos. 

Vamos voltar a esse assunto do JavaScript mais tarde, mas primeiro vamos ver as 
transudes em a$ao para melhorar a experiencia de interfaces que ja desenvolvemos 
anteriormente. 
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8.4 Transic^oes na galeria de fotos 

Voce se lembra da galeria de fotos dos reforms da Plataformatec que criamos anteri- 
ormente para usar a propriedade transform com a fun^ao rotate? Vamos aprimo- 
rar o efeito de scale adicionado ao : hover das fotos com uma transi^ao - e isso sera 
absurdamente simples - basta aplicar a seguinte linha ao seletor da li: 

li f 

transition: transform 0.2s linear; 

> 

Abra a galeria no seu navegador e passe o mouse pelas fotos novamente. Incrivel, 
certo? Apenas uma linha de CSS e ganhamos essa animaqao - mas essa linha contem 
bastante informa<^ao sobre o que queremos fazer. A propriedade transform e um 
atalho para as 4 propriedades que compoe a anima^ao, da mesma forma como usa- 
mos margin para definir 4 margens diferentes em uma propriedade so, sendo elas: 

1) transition-property: para qual propriedade a transfoao sera aplicada. E possivel 
utilizar o valor all para referenciar todas as propriedades do elemento; 

2) transition-duration: A dura^ao que a transi^ao deve ter, em segundos; 

3) transition-timing-function: Como a velocidade da transfoao devera ser cal- 
culada, os valores mais comuns sao linear, ease, ease-in, ease-out e 
ease-in-out; 

4) transition-delay: tempo de espera que precede a transfoao - geralmente omiti- 
mos essa propriedade para utilizar o valor padrao dela, o. 

Com isso explicado, fica facil entender o que a nossa defini^ao faz: aplicamos a 
transit ao a propriedade transform, com 0.2s de dura^ao e a transfoao devera ser 
executada em uma velocidade linear. Apesar de existir um mar de opifoes possiveis 
que conseguimos combinar com essas propriedades, e facil definir um padrao de va¬ 
lores para a dura^ao e a velocidade e repetir os valores em diversos lugares e projetos 
- melhor do que se preocupar constantemente em otimizar as transudes para cada 
uso possivel, 
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Revisitando um velho amigo 

Vamos voltar ao formulario de contato criado no capitulo anterior - onde as men- 
sagens de ajuda sao exibidas conforme os campos recebem foco - e adicionar transi- 
$oes as mensagens. Diferente do exemplo anterior, precisamos fazer alguns ajustes ao 
estilo do formulario e podemos combinar transi^oes diferentes para criar um efeito 
melhor. 

E-mail: par exemplo. seurameS'doTiirio.com, 

Praencha p a-fnali c prof amp nte. 

As & unto: 

Mensagem: 




invlar mens a gem 


Figura 8.6: O formulario de contato criado no capitulo anterior. 


Primeiramente, precisamos trocar a defini^ao de display : none; das mensa¬ 
gens - nao podemos usar essa propriedade nas nossas animates, pois elementos 
que estao escondidos desta forma nao recebem os efeitos de transit ao quando 
mudamos o valor dela para block. Para contornar isso, precisamos esconder as 
mensagens de outra maneira, utilizando a propriedade opacity. Entao, o CSS da 
classe .hint ficaraassim: 

.hint { 

background-color : #FFFBE4; 

border-radius: 3px; 

border: lpx solid #CCC; 

box-shadow: lpx lpx 3px rgba(0,0,0,0.2); 

display: inline-block; /* Colocamos o 'inline-block' de volta. */ 
font-size: 0.8em; 
margin-left: 20px; 

opacity: 0; /* Remove a opacidade do elemento para esconde-lo, */ 
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padding: 3 px; 

> 

No seletor para as mensagens que sao exibidas no estado de : focus dos campos, 
vamos alterar a opacidade do elemento para exibir ele corretamente: 

input: focus + .hint, textarea: focus + .hint { 
opacity: 1; 

> 


Alteramos a forma que escondemos e exibimos a mensagem, e agora e necessario 
adicionar a defini^ao da transi^ao a ser usada. 

.hint { 

transition: opacity 0 . 5 s; 

} 


E-mail: 


E-mail: 


I 


per exempt, e ft' tiormni & .com, 


E-null: 


1 


3 


per exgm pto, spunem e @ dem ini 0 .ppm. 


Figura 8.7: A transi^ao de opacidade sendo aplicada a mensagem. 


Uma transi^ao de meio segundo, linear, na propriedade opacity. Teste nova- 
mente a exibi^ao das mensagens e veja a transi^ao em ayao. Mas ainda podemos 
incrementar a transi^ao, adicionando a margem lateral na jogada. Vamos mover a 
defmi<pao de margin-left da classe .hint para o seletor de : focus, deixando o CSS 
assim: 
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input: focus + .hint, textarea: focus + .hint { 
margin-left: 20px; 
opacity: 1; 

> 


Agora, alem do opacity, a propriedade margin-left tambem sofrera mudan^as, 
e precisamos adicionar uma defini^ao de transition para ela: 

.hint { 

transition: opacity 0.5s, margin-left 0.5s; 

> 


Ou, utilizando o atalho do all, definindo apenas uma propriedade e uma dura- 

$ao. 

.hint { 

transition: all 0.5s; 

> 


E-mall?: 


E-mails: 


I 


por ex&mpJo. s eurxKTi a #domj nj^corn. 


E-malli: 


gHsmpto, seu nom e @ domn™ 5 ,com. 


Figura 8.8: Ambas propriedades sendo ’animadas’ pela transi^ao criada. 


Testando novamente o formulario, podemos ver a nova versao da nossa tran- 
si^ao, cuja inten^ao e demonstrar que a mensagem esta “entrando” na interface do 
usuario, e saindo quando outro campo recebe foco. Apesar das mudancas necessarias 
no codigo escrito anteriormente, conseguimos adicionar as transudes no formulario 
sem perder o comportamento antigo. 
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8.5 Um detalhe importante sobre transi^oes e Ja¬ 
vaScript 


IT’S DANGEROUS TO GO 
ALONE■ TAKE THIS. 


Se voce pretende substituir as an imagoes via JavaScript por transigoes utilizando 
CSS, preciso te falar duas coisas: Primeira, essa e uma otima ideia, e segunda, 
voce precisa aprender mais um truque para ter controle sobre a sequencia de coi¬ 
sas que sao executadas. Via JavaScript, geralmente, podemos definir uma fungao de 
callback a ser executada quando a animagao terminar, podendo encadear anima¬ 
tes, mudar o conteudo de elementos e mais - mas e como fazer isso quando se usa 
transudes? 

Para isso, existe um novo evento disponivel via JavaScript chamado 
transit ion end. Ele sera disparado quando a transigao de uma propriedade 
foi finalizada. Assim como no CSS, onde precisamos utilizar um prefixo espe- 
cifico como -moz-, -webkit- e -o, cada navegador, no momento, possui um 
nome especifico para o evento de transitionend: Para o Safari e o Google Ch¬ 
rome, baseados no WebKit, e preciso usar o nome webkitTransitionEnd, para 
o Opera oTransitionEnd e para o Internet Explorer 10 o nome a ser utilizado 
e MSTransitionEnd. As ultimas versoes do Mozilla Firefox ja utilizam o nome 
transitionend, apesar da necessidade de se usar o prefixo no CSS. 

Um exemplo rapido disso: Digamos que voce quer executar um codigo especifico 
apos remover a opacidade do seu elemento #popup. Um codigo que provavelmente 
seria escrito usando as fungoes do j Query assim: 

$( '#popup') .fadeOnt (functionO { 

// 0 '#popup' ja esta com opacidade 0; 

}); 


Pode ser escrito assim, utilizando o transitionend em um navegador baseado 
no WebKit, e uma classe . hidden que altera a opacidade: 

$ ( 1 #popup '). on ( 'webkitTransitionEnd' , functionO { 

// A transigao do '#popup' foi finalizada. 

» 

$( 1 #popup' ).addClass( 1 hidden 1 ); 
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8.6 Transform a<^oes em 3D 

As fun^oes de transform em 2D sao interessantes, mas nao se comparam aos efeitos 
criados pelas fun^oes de tres dimensoes. Capazes de usar todo o poder de rende- 
riza^ao dos navegadores, com essas fundoes podemos criar efeitos similares ao de 
aplicaqoes nativas do Windows ou do OS X, 

Algumas das novas fun^oes disponiveis: 

1) translateZ, que assim como seus similares translateX e translateY, permite a 
reposiqao dos elementos dentro de urn eixo especifico; 

2) rotateX, rotateY podem ser usadas para rotacionar os elementos nos eixos ver¬ 
ticals e horizontais; 

3) perspective, que deixa possivel manipular a perspectiva dos elementos em meio 
as transformaqoes; 

4) matrix3d, translate3d e rotate3d, versoes melhoradas de funqoes que vimos an- 
teriormente, agora com suporte a 3D. 

Alem das fun^oes novas, uma nova propriedade foi adicionada para manipu¬ 
lar o efeito da transform a$ao quando aplicada a elementos com outros elementos 
dentro dele, o transform-style. Por padrao, os elementos filhos nao comparti- 
lham do eteito 3D existente no elemento que os contem - o que leva a urn com- 
portamento inesperado do posicionamento - e podemos mudar isso utilizando o 
transform-style com o valor preserve- 3 d, aplicando os efeitos aos elementos in¬ 
fernos do que esta sendo transformado. 

Apesar do suporte escasso de navegadores, existem cenarios onde utilizar efeitos 
em 3D sao uma otima ferramenta para melhorar a intera^ao dos seus projetos e rou- 
bar elogios pela beleza dos efeitos. Paginas voltadas para dispositivos moveis ou cuja 
audiencia majoritaria utiliza navegadores atualizados - como o Firefox e o Chrome 
- sao otimas pedidas. Aconselho isso, poia alternativas aos efeitos para navegadores 
sem suporte provavelmente vao requerer mu dan ^ as maiores na sua interface para 
permitir o uso em casos onde nao ha suporte as funqoes de 3D. 

8.7 Girar formularios com apenas um clique 

Vamos transitar entre dois formularios utilizando animates 3D - geralmente vemos 
isso sendo feito com efeitos mais simples, mas o trabalho extra para chegar no que 
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vamos criar nao e tao grande quanto se pode imaginar. Vamos come^ar com o codigo 
para os formularios. 

Primeiro, um formulario de cadastro tradicional: 

<section class® 'signup 1 > 

<form> 

<h2>Cadastre-se agora f </h2> 

<p> 

<label for= M account_email 11 >E-mail</label> 

<input type® 'email' id®" account_email"> 

</p> 

<p> 

clabel for=" account _password M >Senha</label> 

<input type® 'password' id®" account_password"> 

</p> 

<p> 

clabel for® "account_password_confirmation"> 

Confirme a sua senha 

</label> 

<input type® 'password' id= "account_password_confirmation"> 

</p> 

<pxbutton>Enviar ! </buttonx/p> 

<a href®' javascript r class®' toggle 1 >Ja estou cadastrado no site</a> 
</form> 

</section> 

E um formulario para login: 

<section class® 'signin' > 

<form> 

<h2>Entrar no site</h2> 

<P> 

<label f or= M user_email M >E-mail</label> 
cinput type® ' email 1 id="user_email l1 > 

</p> 

<p> 

<label for® "user_pas sword" >Senha</label> 

<input type® 'password' id="user_password"> 

</p> 

<p> 

<button>Enviar ! </button> 

</p> 
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<a href=' javascript:; 1 class=' toggle 1 >Quero me cadastrar</a> 
</form> 

</section> 

Junto deles, um pouco de CSS (devidamente inspirado em exemplos anteriores) 
para adicionar estilo aos campos e posicionar todos os elementos: 

form { 

font-size: 0.8em; 
padding: lOpx; 

> 

label { 

display: block; 
font-weight: bold; 

> 

input { 

border: lpx solid #CCC; 
box-shadow: inset 2px 2px 2px #EEE; 
font-size: 0.9em; 
padding: 2px 5px; 

> 
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Cadastre-se agora! 

E-mail 

S#nha 

Confirms a sua senha 

Enviar! 

Ja as Sou cadastraoti m site 

Entrar no site 

E-mall 



Figura 8.9: O formulario de cadastro e o de login. 


Nada muito diferente do que 110s ja vimos anteriormente, certo? Os links de 
“Quero me cadastral” e Ja estou cadastrado no site serao utilizados para tran- 
sitar entre os formularios, com uma leve ajuda de JavaScript e do jQuery. Agora, 
vamos colocar os nossos formularios dentro de 2 elementos - pode soar que isto e 
desnecessario, mas eles terao um papel importante a cumprir. 

<div class= 'container 1 > 

<div class= ’card' > 

<!— As segoes de 'login' e 'signup' vao aqui... —> 

</div> 

</div> 

E claro, um pouco de CSS para esses elementos. 

.container { 
height: 300px; 
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position: relative; 
width: 200px; 

> 

.card { 

border-radius: 5px; 
border: lpx solid #CCC; 
height: 100"/ D ; 
position: absolute; 
width: 100°/ 6 ; 

> 

.card section { 
background-color : #FFF; 
border-radius: Spx; 
position: absolute; 

> 


Entrar no site 



sstaj eacEaslrado ms site 


Figura 8.10: As se^oes devidamente posicionadas uma em cima da outra. 


Definimos o elemento que vai conter as seqoes e seus formularios, e posiciona- 
dos exatamente uma em cima da outra. Para poder “girar” os formularios de urn 
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lado para outro, precisamos colocar um deles de costas, certo? Entao, vamos usar o 
rotateY! 

.signup { 

transform: rotateY( 180 deg); 

> 


Entrar no site 

E-maB 

Senha 

Enviar! 

Quero me csdaslrar 

| i IUIVI.U 

sMM m&lMtm wOlteil- 


Figura 8.11: Podemos ver o formulario de cadastre invertido ao fundo. 


Feito! Mas o formulario aparece invertido no fundo, o que pode deixar as coisas 
bastante estranhas. Entao precisamos esconder as “costas” do formulario, atualizado 
um dos seletores que criamos anteriormente: 

.card section { 
backf ace-visibility : hidden; 
background-color : #FFF; 
border-radius: 5 px; 
position: absolute; 

} 
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Entrar no site 



Figura 8.12: Com o ’backface-visibility’ em a^ao, a se^ao de cadastro nao aparece. 


Com a propriedade backface-visibility definida como hidden, as costas dos 
elementos (no nosso caso, das se^oes . signup e . signin) ficaram invisiveis. O que 
precisamos agora e mudar de um formulario para outro, utilizando 11m peda^o de 
codigo JavaScript, utilizando o jQuery: 

jQuery(function($) { 

$( 1 section' ).on( 1 click 1 , 'a', function(e) { 

$( ' .card' ).toggleClass( 'flipped' ); 

» 

»; 


Toda vez que algum link dentro de uma section for clicado, um dos containers 
que adicionados anteriormente - a div .card - ira receber a classe flipped, ou ira 
perder essa classe caso ela esteja presente. Mas nao adicionamos o CSS especifico 
dessa classe - que sera bem simples: 

.card.flipped { 

transform: rotateY( 180 deg); 

> 


Assim, todo o elemento sera rotacionado por inteiro - entao o formulario que es- 
tava de costas ficara de frente, e o que estava na frente licara para tras. Se voce testar 
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isso e tentar voltar para o formulario de login, vera que nao conseguimos clicar nos 
elementos do formulario de cadastro. Isso eporque a div .card nao esta no mesmo 
espa$o das se^oes dos formularios - o caso do transform-style que comentei an- 
teriormente. Basta corrigir isso e podemos transitar de um formulario para outro a 
vontade. 

.card { 

border-radius: 5px; 
border: lpx solid #CCC; 
height: 100%; 
position: absolute; 
transform-style: preserve-3d; 
width: 100%; 

} 


Cadastre-se agora! 

C'fniri I 

II I 

COnftrrne a sua senhi a 

Enviar! 

JH S&1QU cadastral n>0 tlta 


Figura 8.13: Agora conseguimos chegar no formulario de cadastro. 


Pronto - conseguimos mudar de um formulario a outro, mas nao temos anima- 
^ao nenhuma - hora de uma transi^ao entrar em jogo, para o elemento . card. Uma 
transi^ao de um segundo e o suliciente para o nosso exemplo. 

.card { 

border-radius: 5px; 
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border: lpx solid #CCC; 
height: 100'/,; 
position: absolute; 
transform-style: preserve-3d; 
transition: transform Is; 
width: 100%; 

> 


Agora estamos chegando a algo interessante, mas ainda nao ajustamos um ponto 
importante do uso de 3D - a perspectiva. Nao existe aquela ideia de profundidade e 
que os elementos estao girando em apenas um eixo dentro do espa^o definido. Para 
determinar a “profundidade” das nossas paginas, precisamos utilizar a propriedade 
perspective. Como os elementos que estao sendo utilizados estao relativos ao nosso 
. container, e no CSS nele que devemos definir a profundidade do nosso piano. 

.container { 
height: 300px; 
perspective: 500px; 
position: relative; 
width: 200px; 

> 


E-mm 


Cadastra-s&agorat 

E-mail 

ittt* 

Wh 

*«*• 


Eim 1 


CwiFlrTTK-l-IUI HA^H 



Erww( 





Figura 8.14: A animagao final, com o efeito de perspectiva. 


500 px e um valor de praxe para esse cenario. E facil notar a diferen^a que isso 
fez para o efeito que criamos - conseguimos notar os formularios girando na ilusao 
de profundidade que criamos via CSS. Se quiser mudar o sentido da animat^ao, basta 
trocar o uso do rotateY por rotateX, e os formularios irao girar na horizontal. 
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8.8 Utilizando animates 

Agora que ja vimos sobre transform e transition e conseguimos criar alguns 
efeitos interessantes com eles, por que se preocupar em ver sobre a propriedade 
animation? A propriedade animation consegue ir alem das transforma^oes e tran¬ 
sudes e permite um controle maior sobre a execu^ao das an imagoes, repeti^oes 
e ate adiar os efeitos por alguns segundos. Alem de diversas op^oes de configu- 
ra^ao, como o animation-delay para um tempo de espera antes da animagao, o 
animat ion-pi ay-st ate para delink se a anima^ao esta sendo executada ou nao e 
o animat ion-iteration-count para delink quantas vezes ela deve ser executada, 
podemos definir diversos pontos de quebra nos efeitos que queremos fazer, e nao 
apenas o inicio e fim como fazemos com as transudes. O que permite toda essa 
flexibilidade e a defini^ao dessas regras utilizando Qkeyframes, onde definimos pro- 
priedades em pontos espedfkos das an imagoes, utilizando porcentagens. Vamos 
colocar a mao na massa e entender melhor o uso dos @keyf rames. 

8.9 COME^ANDO COM KEYFRAMES 

Nossa primeira anima^ao sera fazer uma entrada digna de cinema para um titulo da 
sua pagina. Para isso so vamos precisar de um hi. 

<hl>Bem vindo!</hl> 

E claro, jogar um pouco de CSS em cima para acompanhar. 
hi { 

color: #000; 
font-size: 1.4em; 
text-align: center; 

} 

Um comedo bastante simples, agora vamos adicionar a anima^ao, que ira traba- 
lhar a opacidade e o tamanho do elemento, utilizando transform. 

hi { 

animation: appear 2s 0 linear; 
color: #000; 
font-size: 1.4em; 
text-align: center; 

> 
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Assim como o transform e o transition sao utilizados como atalhos 
para definir varias op^oes de uma vez so, o animation pode compor diver- 
sos valores. No nosso caso, estamos utilizando a anima^ao chamada appear 
(animation-name), com 2 segundos de dura^ao (animation-duration), a ser exe- 
cutada imediatamente (com o animat ion-del ay em o) e com um progresso linear 
(animation-timing-function). Mas, em nenhum momento definimos do que e 
composta essa animaqao. Precisamos definir um grupo de regras para ela utilizando 
uma se^ao de Skeyf rames, assim: 

@keyframes appear { 

07 , { 

opacity: 0; 
transform: scale(2); 

> 

707 . { 

opacity: 1; 
transform: scale(l); 

> 

1007 . { 

transform: scaleCl.2); 

> 

> 


Dentro da segao de Okeyframes, e possivel definir peda^os de CSS que serao 
aplicados em um ponto especifico da anima^ao fazendo referenda a porcentagem 
do progresso - ja que a dura^ao em si e definida em outro ponto. A transi^ao de um 
ponto e outro sera feita da mesma forma que as transudes sao executadas, utilizando 
a fun^ao de progresso do animat ion-timing-function. 

Aqui, estamos come<~ando a animaqao com o elemento com seu tamanho do- 
brado (usando o scale) e sem opacidade nenhuma, aos 70% da anima^ao (com a 
nossa anima^ao de 2 segundos, isso seria aos 14s) o elemento deve ter a sua opa¬ 
cidade normalizada e o tamanho regular, e a anima^ao sera finalizada (ao comple- 
tar os 2 segundos) com o elemento em uma escaia de 1.2. Apos isso, qualquer mu- 
dan^a presente na anima^ao ira desaparecer e o elemento voltara ao normal. Para 
isso, vamos levar a defini^ao de scale (1.2) para o estiio do hi e adicionar um 
transform-origin para centralizar o efeito de escaia. 

hi { 

animation: appear 2s 0 linear; 
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color: #000; 
font-size: 1.4em; 
text-align: center; 
transf orm: scale(1.2); 
transform-origin: 50"/, 50'/,; 

> 


Bern vindo! 

Bern vindo! 


Bern vindo! 


Figura 8.15: Os 3 momentos da anima^ao do nosso ’hi’ 


Com o controle sobre diversos pontos das an imagoes e das diversas op^oes de 
configuraqao, conseguimos criar efeitos que nao possivel apenas com transition e 
transform, apesar da necessidade de escrever um numero maior de linhas depen- 
dendo do resultado desejado. 

Ail imagoes infinitas 

Voce provavelmente ja viu o universo de gifs animados que sao utilizados para 
informar quando algum processamento esta feito por debaixo dos panos e que de- 
vemos esperar a pagina carregar algo novo em algum momento - os chamados lo¬ 
aders. Eu fico muito feliz em saber que nao precisamos mais de imagens assim e 
podemos utilizar apenas CSS (e talvez um pouco de JavaScript), para replicar esse 
componente e conseguir mudar tamanhos e cores com apenas algumas linhas de co¬ 
digo. Caso voce nao acredite nisso, vamos criar uma versao simples de um desses 
componentes. 
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Primeiro, precisamos apenas de um span, ja que o nosso exemplo sera bastante 
minimalista. 

<span class= 'loading 1 title= 'Carregando ... ’ >Carregando... </span> 
.loading { 

background-color : #666; 
border-radius: 50 %; 
font: 0/0 serif; 
position: absolute; 

> 


Definimos um fundo escuro, bordas redondas o sufkiente para garantir que o 
elemento apare^a como um drculo, e uma fonte zerada para esconder o texto do 
span - Mas e o tamanho? E os efeitos? Tudo isso ira na nossa anima^ao, com as 
regras abaixo: 

^keyframes pulse { 

0 % { 

width: 0; 
height: 0; 
opacity: 1; 
top: 50 px; 
left: 50 px; 

> 

100 % { 

width: 30 px; 
height: 30 px; 
opacity: 0; 
top: 35 px; 
left: 35 px; 

> 

> 


Enquanto a nossa esfera vai aumentando de tamanho - de o a 35 px - ela vai 
sendo apagada pela mudan^a de opacidade. As mudan^as de top e left garantem 
que ela ficara centralizada no seu lugar e nao ira se mover por ai devido a mudan^a de 
tamanho. Para utilizar essa anima^ao pulse no nosso loader com o efeito desejado, 
precisamos definir que ele sera animado para sempre. 

Sim, para sempre. Assim: 
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.loading { 

animation: pulse 1.5s infinite; 
background-color: #666; 
border-radius: 507,; 
font: 0/0 serif; 
position: absolute; 

> 


Figura 8.16: A anima^ao infinita do nosso ’loader! 


Podemos usar infinite como um valor para o animat ion-iteration-count, e 
a anima^ao sera executada para sempre - podemos apenas adicionar um pouco de 
JavaScript para esconder e exibir o loader quando for necessario. Caso sejia neces- 
sario mudar a cor ou aumentar o tamanho para adequar a interfaces diferentes, so 
precisamos alterar algumas linhas de CSS, sem precisar criar imagens novas em um 
editor e executar mais requisites HTTP para servir as imagens. 
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A populariza^ao e evolu^ao dos smartphones e tablets nos ultimos 4 anos teve urn 
grande impacto nas tecnologias e na forma em que desenvolvemos os nossosprojetos 
para a web. 

Garantir uma experiencia adequada para o numero crescente de usuarios que 
utilizam esses dispositivos se tornou uma vantagem comercial e um diferencial para 
produtos, empresas e desenvolvedores - ninguem deseja excluir um grupo de usua¬ 
rios devido ao tipo de equipamento que eles utilizam para acessar a web. 

Para entrar neste mundo e abra^ar a onda do mobile , e preciso uma evolu^ao 
tanto tecnica - mu dan 9a s de ferramentas e tecnologias utilizadas - quanto mental - 
o seu processo de desenvolvimento precisa se adequar a este cenario. 
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9.1 O que e “Responsive Web Design” e porque voce 

DEVE SE PREOCUPAR 

Ethan Marcotte criou o termo Responsive Web Design em urn artigo escrito no 
site A List Apart | 5 j, que entao se tornou urn livro, que e referenda no assunto. A 
combina^ao de elementos fluidos, com dimensoes relativas ao espa^o disponivel no 
aparelho do usuario, e regras especificas para definir estilos especificos para tama- 
nhos de tela diferentes e funcionalidades diferentes (como, por exemplo, a resolu^ao 
fantastica do iPhone 4 e do iPad de 3 a gera^ao). 

Sites responsivos adequam os seus elementos e o seu comportamento para cena- 
rios, como disponibilizando fluxo de navega^ao que se adequara ao tamanho da tela 
utilizada ou mudando as intera^oes do usuario caso ele use um dispositivo sensivei 
a toque ou nao. Alem de precisar identificar o tamanho, capacidade e funcionalida¬ 
des disponiveis, e importante que a disposi<;ao dos elementos seja flexivel o bastante 
para se adequar a qualquer dispositivo. 

O primeiro passo para se come9ar a trabalhar com designs responsivos e fazer a 
transi^ao de elementos fixos - de dimensoes fixadas em px - para elementos fluidos 
- que se baseiam em porcentagens e em. Desta forma, a sua pagina consegue se ex- 
pandir ou diminuir de acordo com a largura disponivel, em vez de se fixar em algo 
similar a 960 px de largura maxima. 

A conversao de tamanhos fixos para fluidos e feita com base em uma formula 
bastante simples: "tamanho fixo 11 / M contexto"= "tamanho fluido". Com ela 
voce consegue converter dimensoes em px para porcentagens (para larguras) ou em 
(para fontes), assim: 

body { 

/* Utilizando 0 tamanho de fonte padrao, geralmente 16 px +/ 

font: normal 100% Helvetica, Arial, sans-serif; 

} 

hi { 

font-size: 1.5em; /* 24 px / 16 px = 1 . 5 em */ 

} 


A principio, esta defini^ao tera o mesmo efeito que definir o tamanho da fonte do 
hi como 24 px. Porem, em dispositivos que o tamanho padrao de fonte seja diferente, 
como em smartphones, font-size do elemento ira acompanhar esta mudan^a de 
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tamanho: em um dispositivo que utilize 12px a fonte do elemento tera 18px de altura, 
e nao 24px. 

Esta mesma abordagem pode ser usada para definir as regras do seu grid - 
tornando-o um grid fluido - e o espagamento entre elementos. Desta forma voce 
consegue fazer os seus layouts acompanharem as diferengas de largura entre diversos 
dispositivos, e entao voce pode tratar as peculiaridades de cada context© utilizando 
media queries . 

9.2 O FUNCIONAMENTO DOS MEDIA QUERIES 

Outra ferramenta do Responsive Web Design sao os media queries - uma regra espe- 
cifica para aplicar um bloco de CSS caso a regra seja atendida. Similar ao uso de CSS 
para estilos especificos de impressao {set^raovoce tambem pode indicar regras 
associadas ao tamanho, orientaqao ou a resolugao de tela. 

@media only screen 

and (min-device-width : 320px) 

and (max-device-width : 480px) { 

/* 

Esta regra sera aplicada em 

aparelhos com uma largura de 320px a 480px, 

o que atende a maioria de smartphones. 

*/ 

> 

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 

/* 

Alem de verificar a largura do dispositivo, 
voce pode conferir a orientagao, utilizando 
"landscape"' ou "portrait". 

*/ 

> 


Utilizando media queries , voce pode definir estilos especificos para tamanhos 
diferentes, o que e melhor do que focar em um tipo de dispositivo especifico. Diver¬ 
sos modelos diferentes de smartphones podem ser atendidos por um mesmo media 
query, o que tambem ajuda a atender novos modelos que irao surgir no futuro. 
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Da mesma forma que um CSS de impressao, voce pode sobrescrever definigoes 
globais de CSS para adequar a sua pagina para tamanhos diferentes. Assim voce 
consegue reordenar elementos, reduzir o tamanho de imagens ou exibir elementos 
alternatives para melhorar a experiencia de uso dos seus usuarios. 


f‘\ fy Csjceri al PtaCafcrm^tcc - Platatnrfnaloc 
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Figura 9.1: Um exemplo do site da Plataformatec (http://plataformatec.com.br): a 
se^ao de fotos muda de tres colunas para apenas uma coluna quando a largura da 
pagina e reduzida. 


O site Media Queries (http://mediaqueri.es/) possui uma coletanea de sites que 
possuem diversos formatos para smartphones e tablets , uma otima referenda para se 
inspirar com outros trabalhos. 

9.3 Nao e uma questao de aparelhos 

Voce pode considerar que toda esta aten^ao para adequar os seus projetos para diver- 
sos dispositivos como o ultimo iPad ou os smartphones do Google, mas esta filosofia 
se aplica para o mundo de notebooks e desktops que estamos tao acostumados a ver. 
Com diversas resolu^oes diferentes por ai, indo de 11” ate 27”, e a inclusao do 
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Retina display na terceira gera^ao da linha do MacBook Pro, e possivel refinar a ex¬ 
perience de uso para tirar proveito da abundancia de pixels ou da qualidade da reso- 
liupao do usuario. Basta possuir um grupo de estilos para larguras acima de 1824 px, 
por exemplo: 

@media only screen and (min-width : 1824px) { 

/* 

Aqui voce pode adicionar estilos para se aproveitar 
de uma tela maior: aumentando fontes, leones, e 
largura dos sens elementos 

*/ 

> 


9.4 POR UM FUTURO MELHOR 

A mu dan 9a da web para estes diversos dispositivos e formas de uso so esta come- 
^ando: o futuro ainda guarda um universo de aparelhos novos, tecnologias e mu- 
dan^as na forma em que nos conectamos pela web, e a industria da internet ainda 
precisa evoluir para acompanhar estas mudan^as. 

Nos nao podemos prever o que vira por ai, mas podemos nos preparar para seja 
la o que o futuro nos reserva. 

Em 2011 foi criado o Future Friendyl 4J, um manifesto assinado por diversas fi- 
guras carimbadas do mundo do desenvolvimento web. La existem 3 principios que 
podemos seguin 

• Voce deve compreender e abra^ar a imprevisibilidade; 

• Pense e comporte-se de uma forma amigavel para o futuro; 

• Ajude os outros a fazer o mesmo. 

O manifesto indica que se deve focar no conteudo que esta em suas maos - o 
que realmente importa para os seus usuarios e os seus clientes - buscando servir ele 
da forma mais flexivel possivel, o que facilita a inclusao de novos formatos e apare¬ 
lhos que surgirem com o passar do tempo, sem deixar de tirar proveito de aspectos 
especificos para prover uma experiencia adequada. 

Todos queremos que o nosso trabalho dure por anos, e para alcan^ar isso, preci- 
samos trabalhar para que as nossas criadoes sobrevivam as mudan^as de tecnologia. 
Imagine ter que reescrever sites inteiros daqui a 2 ou 3 anos porque a versao atual 
nao e adequada para o cenario atual de dispositivos e casos de uso? 
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Ferramentas - Frameworks, Plugins 
e Pre-processadores 


Ate agora, vimos varios recursos interessantes de CSS 3 e HTML5 para que possa- 
mos criar sites e aplica^oes com visuais elegantes. Porem, muitas das vezes, precisa- 
mos criar os estilos do zero, pensar nas cores dos botoes, nas divisoes de colunas do 
pagina, no estilo das tabelas ou ate mesmo coisas que podem ser mais trabalhosas, 
como cuidar para que a pagina funcione em browsers mais antigos, que nao possuam 
os novos recursos de CSS 3 e HTML5. 

Para nos ajudar nessas situates, temos disponivel diversas ferramentas que nos 
auxiliam nesse trabalho, como o Twitter Bootstrap, HTML? Boilerplate, -prefix-free 
entre outras. Saber o que cada uma nos oferece e muito importante, assim podemos 
escolher qual ferramenta melhor se encaixa com o projeto que esta sendo desenvol- 
vido. 



io.i. Twitter Bootstrap 


Casa do Codigo 


10.1 Twitter Bootstrap 

Um dos projetos de maior sucesso no Git Hub, o Twitter Bootstrap e um toolkit cri- 
ado por designers do Twitter e adotado por diversas empresas e equipes para acelerar 
o inicio de projetos por ja incluir diversos componentes e facilidades de CSS, HTML 
e JavaScript. O projeto inclui um grid fluido (que voce deve ter lido a respeito na 
se<~ao |6.7[ , diversos botoes e campos de formularios, abas de navega^ao, plugins em 
JavaScript e muito mais. 

O projeto e desenvolvido usando LESS, um pre-processador de CSS que facilita 
a escrita de todo o CSS do Bootstrap, mas voce pode baixar o arquivo CSS final e 
utilizar ele em qualquer de seus projetos. 

Exemplo do Twitter Bootstrap 

E-mail 

Usaremos o sea e-mail para res pond er a ana men sagem! Nad a de spam a. 

Text input 

Nos diga qnal e o seu problema oli ideia, 

Mertsagem 


Escreva. a sua mensagem para a eqaipe do site. 



Voce pode usar o estilo padrao do Twitter Bootstrap sem precisar escrever ne- 
nhuma linha de CSS - apenas utilizando o HTML e as classes que a documentai^ao 
do projeto indica. Depois disso, basta sobrescrever o que for necessario para adequar 
o visual as necessidades do seu projeto, como cores, tamanhos, bordas etc. 

O Bootstrap e uma otima pedida para desenvolvedores que nao possuem tanto 
conhecimento (ou tempo para dedicar) em design e CSS. Se o quesito originalidade 
for importante para voce, dedique um tempo para personalizar o visual do Bootstrap 
para o seu projeto. Toda a documenta^ao e exemplos podem ser encontrados no site 
http://twitter.github.com/bootstrap/ 









Casa do Codigo 


Capitulo 10. F'erramentas - Frameworks, Plugins e Pre-processadores 


Com o sucesso do projeto, algumas alternativas surgiram com o tempo, dispo- 
nibilizando solu^oes similares para os mesmos casos de uso do Bootstrap: 

• Foundation, feito pela ZURB - Toolkit similar ao Bootstrap criado por uma 
empresa com mais de 10 anos de experiencia no ramo de web design - http: 
//foundation.zurb.com/ 

• HTML Kickstart, criado por Joshua Gatcke - http://www.99lime.com/. 

• Skeleton - um toolkit minimalista, que possui um grid responsivo e alguns 
componentes simples, como botoes e abas. - http://getskeleton.com/ 

Vale a pena baixar cada um desses frameworks, testar os seus componentes, grids 
e funcionalidades para descobrir se algum deles se encaixa mais com seu gosto ou 
ate mesmo se voce prefere criar todo o CSS por si proprio. 

10*2 HTML5 Boilerplate 



A rock-solid default for HTML 5 awesome. 

► I'm new hero: plz axpiain why it’s good, first. 


Enquanto frameworks como o Bootstrap e o Foundation possuem diversos compo¬ 
nentes como grids, botoes usando gradientes, sombras e outras novidades do CSS3, o 
HTML5 Boilerplate, que nao e exatamente um framework, segue por outro caminho: 
um template simples, construido em cima de boas praticas para garantir compatibi- 
lidade e performance. 

O HTML5 Boilerplate usa o Normalize.css (que vimos na se<,ao|4.i[l como reset 
basico, classes utilitarias adicionais (para corrigir floats e substituic^ao de imagens, 
por exemplo), jQuery disponibilizado pelo CDN do Google e mais. Apesar de nao 
disponibilizar nenhum componente grafico, ele e uma base solida para come^ar um 
projeto novo. 
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CDN? 

Um CDN - Content delivery network - e uma rede de distribui^ao de 
arquivos com o objetivo de servir conteudo contando com alta disponibili- 
dade e performance, com servidores estrategicamente localizados ao redor 
do mundo, sendo uma otima solu^ao para servir arquivos estaticos como 
imagens, scripts e videos. 

O CDN do Google e famoso por disponibilizar as principais bibliotecas de 
JavaScript usadas atualmente, como o jQuery, o MooTools e o Prototype. 
Alem disso, e possivel contratar a infraestrutura de empresas como a Ama¬ 
zon e Akamai para servir seus proprios arquivos. 


Veja o codigo, mais detalhes e tutoriais sobre como aproveitar o projeto ao ma- 
ximo no site http://html5b0ilerplate.com/ 

10.3 Plugins em JavaScript 

As vezes apenas HTML e CSS nao e o suiiciente, pois no meio de incompatibilidade 
com navegadores e APIs novas que nao foram implementadas por complete, e pos¬ 
sivel preencher essas lacunas com JavaScript ou identificar o que o podemos ou nao 
fazer com um navegador especifico usando JavaScript para analisar o User Agent ou 
testando as APIs disponiveis. 

10.4 Modernizr 

Modernizr e uma biblioteca que permite identificar o que e suportado e o que nao 
e suportado no navegador dos nossos usuarios e adequar a experiencia do seu site 
para isso, seja via CSS ou JavaScript. Por exemplo, identificar o suporte a tag <audio> 
e a qual formato se deve usar, como ogg, mp 3 ou m4a. Ou, para navegadores que nao 
suportam anima^oes e transforma^oes, aplicar um estilo alternativo para que o seu 
layout continue funcional para seus usuarios. 

O Modernizr permite duas abordagens: a primeira e atraves da adicao de clas¬ 
ses ao elemento html, identificando as funcionalidades disponiveis (em navegadores 
sem suporte a intera^ao por toque, como os desktops, ele adiciona a classe no-touch) 
ou pela API em JavaScript no objeto Modernizr: 
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if (Modernizr.canvas) { 

if Ok, podemos usar Canvas aqui. 

} else { 

// Canvas nao esta disponivel neste navegador. 

> 


Para mais detalhes das funcionalidades que o Modernizr pode detectar e para 
baixar o codigo para adicionar ao seu projeto, visite http://modernizr.com/ 

-prefix-free 

E fato que nenhum desenvolvedor gosta de repetir o mesmo codigo para satisfa- 
zer 3 ou 4 prefixos diferentes toda vez que se vai usar um gradiente ou uma anima^ao 
em CSS. 

Para solucionar isso direto nos navegadores, Lea Verou, uma engenheira de 
front-end grega, desenvolveu uma biblioteca que altera o CSS da sua pagina, adi- 
cionando apenas os prefixos necessaries. A maior vantagem disso e que voce nao 
precisa escrever as suas folhas de estilo se preocupando com qual prefixo voce pre- 
cisa usar para cada propriedade nova do CSS3. 

Se interessou no -prefix-free? O site da biblioteca e http://leaverou.github.com/ 
prefixfree/ Interessado ou nao, nao deixe de visitar o blog da Lea Verou, lotado de 
outras ferramentas e posts interessantes sobre JavaScript e CSS3 - http://lea.verou. 
me/ 


10*5 Polyfills 

Existem dezenas de outras bibliotecas que ajudam a preencher os buracos de funci¬ 
onalidades ausentes em diversos navegadores diferentes que precisamos enfrentar, 
como suporte a SVG, LocalStorage, WebSockets, Geolocaliza^ao. As bibliotecas que 
implementam essas APIs em navegadores antigos ou que nao possuem suporte re- 
ceberam o nome de Polyfills. 1 6 1 

Na Wiki do Modernizr no GitHub existe uma lista extensa de diversas im- 
plementa^oes de Polyfills feitas pela comunidade, https://github.com/Modernizr/ 
Modernizr/wiki/HTMLs-Cross-browser- Polyfills. 
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10.6 Pre-processadores 

Infelizmente, CSS nao possui o dinamismo e alguns recursos de linguagens de pro- 
grama^ao como Ruby, Python ou JavaScript, o que faz muitas vezes com que o nosso 
codigo fique extenso e repetitivo. Para amenizar isso, existem linguagens interme- 
diarias que adicionam alguns recursos interessantes na linguagem e ajudam a criar 
mais estilos, com menos codigos. Essas linguagens intermediarias sao chamadas 
de pre-processadores e no momento da escrita desse livro, posso recomendar tres: 
LESS, Sass e Stylus. 

Os tres possuem muitas funcionalidades em comum, o que ajuda a transitar entre 
cada pre-processador para avaliar todos e escolher o seu favorito. Veja algumas das 
principais funcionalidades a seguir: 

Seletores aninhados 

Para reduzir a duplica^ao de seletores, os pre-processadores permitem que voce 
aninhe os seletores de elementos contidos em outro elemento (como no caso abaixo). 

// Aninhando os seletores, nao precisamos escrever 

// 'header nav' e 'header a' para alterar o estilo apenas dos elementos 
// presentes dentro de 'header'. 

header { 

padding: lOpx 5px; 
nav { 

float: left; 

} 

a { 

color: red; 

> 

} 


Com este exemplo, conseguimos gerar o seguinte CSS: 
header { 

padding: lOpx 5px; 

} 

header nav { 
float: left; 
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> 

header a { 
color: red; 

> 


Variaveis 

Valores em comum, como uma cor ou um tamanho espedfico, que voce tende a 
repetir com frequencia na sua folha de estilo podem ser extraidos para uma variavel. 
Assim, caso voce precise mudar todos os vermelhos do seu site para roxo voce nao 
tera tanto trabalho. 

// No LESS, voce pode definir variaveis com '©nomedavariavel: valor', 
// e usa-las em qualquer parte do seu codigo, alem de poder manipular 
// o seu valor com calculos ou outras fungoes 

Odarkred: #990000; 

@grid: 960px; 

body { 

color: Sdarkred; 
width: ©grid; 

> 

.sidebar { 
width: ©grid / 3; 

> 

.container { 
width: ©grid / 2; 

> 


Quando processamos este exemplo utilizando o LESS, as defini^oes de variaveis 
geram os seguintes seletores: 

body { 

color: #990000; 
width: 960px; 

> 

.sidebar { 
width: 320px; 
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> 

.container { 
width: 480px; 

} 


Mixins 

Mixins trazem muita flexibilidade a sua folha de estilo para repetir definigoes 
similares, executar cakulos ou gerar prefixos espedficos sem repetir as mesmas de- 
finigoes diversas vezes. 

// Os mixins do Stylus permitem que voce escreva CSS sem se preocupar 
// se esta usando urn mixin ou uma propriedade comum, como no caso abaixo 
// onde o 'transform' cria todas as variagoes com os prefixos 
// necessarios. 

// Caso voce nao precise mais dos prefixos '-moz' ou '-webkit 1 , 

// por exemplo, basta alterar o mixin e gerar o sen arquivo '.css' 

// novamente. 

transform () { 

-moz-transform :arguments; 

-ms-transform: arguments; 

-o-transform: arguments; 

-webkit-transform; arguments; 
transform; arguments; 

> 

.slider { 

transform: width 0.2s linear; 

> 

.popup { 

transform: opacity 0.5s; 

} 


Com esta definigao de mixin, o Stylus consegue gerar o seguinte codigo: 
slider { 

-moz-transform: width 0.2s linear; 

-ms-transform: width 0.2s linear; 

-o-transform: width 0.2s linear; 

-webkit-transform: width 0.2s linear; 
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transform: width 0.2s linear; 

> 

.popup { 

-moz-transform: opacity 0.5s; 

-ms-transform: opacity 0.5s; 
-o-transform: opacity 0.5s; 
-webkit-transform: opacity 0.5s; 
transform: opacity 0.5s; 

> 


Mas cuidado, pre-processadores nao sao so unicornios e arco-iris. O uso exces- 
sivo ou inadequado das suas funcionalidades pode trazer problemas para voce e a sua 
equipe. Muito aninhamento complica a leitura do seu codigo e gera seletores muito 
maiores do que voce realmente precisa. Muitos mixins e variaveis distanciam demais 
o codigo que voce escreve do codigo gerado, o que complica o debug e a resolu^ao 
dos problemas que aparecerem durante o desenvolvimento, 

Com o devido conhecimento de CSS, os pre-processadores podem ajudar bas- 
tante a tornar o seu codigo fonte mais flexivel e inteligente, seja manipulando cores 
para facilitar a cria^ao de gradientes, escrevendo prefixos de navegadores espedficos 
como -moz e -webkit ou reduzindo a duplica^ao de codigo com mixins ou fun^oes. 

Para fazer a sua escolha, sugiro uma pesquisa rapida e um test-drive nos pre- 
processadores do seu interesse. Confira qual se adequa melhor as ferramentas e lin- 
guagens que voce ja usa no seu dia a dia. Confira os sites de cada um para come<par 
a estudar melhor: 

• LESS - http://lesscss.org/; 

» Sass - http://sass-lang.com/, 

• Stylus - http://learnboost.github.com/stylus/ 


10.7 E tudo CSS e HTML 

Os itens citados acima sao frutos do trabalho de desenvolvedores como eu e voce, 
com grande interesse em CSS e HTML. Antes de ter essas ferramentas em maos, 
todos eles passaram por apertos e problemas classicos que se encontram no dia a dia 
de desenvolvimento. Antes de entrar de cabe^a nessa festa, lembre-se de praticar um 
pouco sem tais ferramentas, apenas voce e seu editor favorito. 
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Desenvolvendo as coisas “na mao” voce consegue entender melhor a razao de 
tais solu^oes terem sido criadas e quais os problemas que elas solucionam. Quem 
sabe, no processo, voce pode criar ferramentas e solu^oes proprias e compartilhar 
elas com a comunidade. 
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Abordamos diversos assuntos sobre HTML e CSS neste livro, mas o universe em 
torno destas tecnologias e vasto demais para se comprimir todas as references, ex¬ 
plicates e tecnicas em um livro. E tudo esta evoluindo a passos largos, o que signi- 
lica que precisamos acompanhar estes assuntos e conferir as novidades que surgem 
para aprimorar e facilitar o trabalho de desenvolvedores como eu e voce. Para isso, 
posso lhe indicar as fontes que eu e diversos outros profissionais utilizamos para nos 
manter atualizados, e acredito que alguns deles podem lhe ser bastante uteis. 

Referencias na internet 

Uma fonte incrivel de conteudo sobre desenvolvimento web e a comunidade cri- 
ada em torno do CSS-Tricks (http://css-trkks.com/), mantido pelo Chris Coyier, 
desenvolvedor e designer americano, que ajuda diversos profissionais a criar web¬ 
sites melhores desde 2007. Outro lugar bastante interessante para se encontrar 
publica^oes nos diversos assuntos da web e a revista digital A List Apart (http: 
//www.alistapart.com/), que tambem possui uma editora de livros para desenvol- 
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vedores, chamada A Book Apart, e prepara uma serie de eventos todo ano chamado 
An Event Apart. 

Para referencias rapidas e explicates enxutas sobre funcionalidades novas, tec- 
nologias associadas a HTML5 e tudo mais, eu indico dois sites incriveis para res¬ 
ponder perguntas como "Quais navegadores atualmente suportam animates?” ou 
"Como euposso simular o uso de Media Queries no Internet Explorer?" o When can 
I use... (http://caniuse.com/) e o HTMLs Please {http://html5please.com/). Atua- 
lizados conforme novas e sped lie a^oes surgem e novas versoes de navegadores sao 
lan^adas, ambos os sites possuem as referencias necessarias para saber como e por 
onde come^ar a trabalhar com coisas novas. 

Outro site bastante interessante para se ter como referenda e o Dive into HTML; 
{http://diveintohtml5.info/). Originalmente criado por Mark Pilgrim e com diver- 
sas contributes de outros desenvolvedores, 0 Dive into HTML5 e uma referenda 
completa que vai desde as tags introduzidas no HTML5 quanto a APIs de JavaScript 
disponiveis e a desenho de graficos em canvas. O mesmo pode se dizer do HTML? 
Doctor {http://html5doctor.com/about/), outro site bastante complete de referencias 
e artigos sobre o assunto. 

Acompanhe quem entende do assunto 

Eu acredito que o mundo da tecnologia e feito por aqueles que o compoem, e 
nao apenas pelas empresas presentes no mercado. Por isso, eu considero muito inte¬ 
ressante o trabalho desenvolvido por diversas pessoas pelo mundo que nos ultimos 
anos, independente do cargo ou empresa que ela se encontrasse, compartilhando 
conteiido, criando projetos e palestras sobre diversos assuntos relacionados a web e 
auxiliando o trabalho de muitos outros. 

Sugiro que voce pesquise e acompanhe os trabalhos, blogs e slides de alguns da 
lista de talentosos professionals abaixo. Um canal comum entre todos eles e o Twitter, 
entao adicionei os seus usuarios no Twitter para voce acompanhar o que eles andam 
comentando por la: 

• Paul Irish (@paul_irish), Mathias Bynens (@mathias), Divya Manian 
(@divya), Nicolas Gallagher (@necolas) e todos os outros envolvidos nos pro¬ 
jetos do HTML5 Boilerplate, HTML5 Please e os outros relacionados. Voce 
pode conferir tudo que essa galera esta criando no perfil da organiza^ao no 
GitHub, https://github.c0m/h5bp 

• Lea Verou (@leaverou), criadora do -prefix-free, Dabblet (http://dabblet.com) 
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e diversas outras ferramentas relacionadas a CSS 3. Alem disso, ela viaja o 
mundo apresentando suas palestras de diversos assuntos. 

• Ethan Marcotte (@beep), autor do livro Responsive Web Design e Luke Wro- 
blewski (@lukew), autor do Mobile First da A Book Apart, livros que se tor- 
naram leituras obrigatorias em seus respectivos assuntos. 

• Brad Frost (@brad_frost), outro entendido no assunto de design responsivo 
de usabilidade, que trabalhou em diversos projetos interessantes de aplica^oes 
para dispositivos moveis. 

• Ryan Singer (@rjs), designer da 37signals, que possui otimas palestras e arti- 
gos sobre o fluxo de trabalho e o desenvolvimento de interfaces para a web. 

• Eduardo Shiota (@shiota), designer que alem de palestrar em diversos even- 
tos aqui no Brasil tambem ministra urn curso sobre Responsive Web Design 
no Howtocode (http://howtocode.com.br/workshops/responsive-design). 

• Sergio Lopes (@sergio_caeIum), que alem de atuar como desenvolvedor na 
Caelum tambem e coordenador e instrutor de seus cursos de web design. 

• Kyle Neath (@kneath), Ben Bleikamp (@bleikamp) e toda a equipe de design 
do GitHub, responsaveis por diversos projetos e interfaces sensacionais. 

Outros livros 

Um caminho interessante para se aprofundar em outros assuntos relacionados a 
HTML e CSS e mergulhar em bons livros sobre o que voce quer tanto aprender. A 
editora A Book Apart possui uma otima cole^ao de livros no campo de web design, 
abordando diversos assuntos, desde HTML e CSS (HTML$ for Web Designers, CSS 
3 for Web Designers e o incrivel Responsive Web Design ), tipografia para a web (On 
Web Typography ) e usabilidade e design (Designingfor Emotion). Sao livros pequenos 
porem bastante objetivos em suas explicates e ricos em conteudo. 

Caso se interesse por JavaScript, a O’Reilly possui diversos livros sobre a lingua- 
gem e sua utiliza^ao nos dias de hoje, abordando desde assuntos basicos e introdu- 
torios a guias avan^ados. Dos diversos titulos da editora, os principals na minha 
opiniao sao: JavaScript: The Good Parts, JavaScript Web Applications e jQuery Pocket 
Reference. 
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